:root {
  --color-canvas: oklch(98% 0.01 240);
  --color-ink-lightest: oklch(97% 0.01 250);
  --color-ink-lighter: oklch(85% 0.02 250);
  --lch-ink-darkest: 20% 0.03 250;
  --color-dark-purple: #551a8b;

  --color-selected: #e0d6e9;
  --color-selected-dark: oklch(60% 0.1 260);
  --lch-blue-medium: 65% 0.1 250;

  --block-space: 1rem;
  --block-space-double: 2rem;
  --block-space-half: 0.5rem;

  --inline-space: 0.5rem;

  --text-small: 0.875rem;
  --text-x-small: 0.75rem;

  --panel-border-radius: 1.4em;
  --panel-padding: var(--block-space);
  --panel-padding-double: var(--block-space-double);
  --panel-size: 45ch;
  --panel-bg: white;

  --input-background: var(--color-canvas);
  --input-border-color: var(--color-ink-lighter);
  --input-padding: 0.3em 2em 0.3em 0.75em;

  --nav-section-gap: .5rem;
  --footer-height: 3rem;

  --z-nav: 2000;

  --actions-width: 2rem;

  --gap: 8px;

  --btn-border-radius: 0.4em;

  --icon-size: 1em;

  --dialog-duration: 150ms;
}

.margin-block-start-half {
  margin-block-start: var(--block-space-half);
}

@layer components {
  .nav__menu {
    input {
      accent-color: var(--input-accent-color, var(--color-ink));
      background-color: var(--input-background, transparent);
      border-radius: var(--input-border-radius, 0.5em);
      border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-ink-medium));
      color: var(--input-color, var(--color-ink));
      font-size: max(16px, 1em);
      /* inline-size: 100%; */
      line-height: inherit;
      /* max-inline-size: 100%; */
      padding: var(--input-padding, 0.5em 0.8em);
      resize: none;
      width: 100%;
    }
  }


  /* Trigger
  /* ------------------------------------------------------------------------ */

  .nav__trigger {
    --input-background: var(--color-canvas);
    --input-border-color: transparent;
    --input-padding: 0.3em 2em 0.3em 0.75em;

    background: transparent;
    border: none;
    font-size: 1.5em;
    font-weight: 600;
    inline-size: auto;
    padding: 0 2em 0 0;
    transition: background 0.2s ease;
    margin-bottom: 1rem;
    margin-top: -1rem;

    ::-webkit-search-cancel-button {
      -webkit-appearance: none;
    }

    &:hover {
      background: #00000010;

      .nav__trigger-logo {
        background: transparent !important;
      }
    }

    .nav__trigger-title {
      font-size: 1.5rem;
      line-height: 1;
      margin-inline-start: 0.4125em;
      margin-inline-end: 0.5375em;
      max-height: 0.8625em;
      overflow: visible;
    }

    img.logo,
    svg.logo {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      width: 7rem !important;
    }

    /* The trigger's logo reads as a full-page hero on phones — most of a
       390px viewport's first screenful. Halve it so real content starts
       sooner; desktop is untouched. Composer-only: the same trigger sits in
       the home stories row, where the logo must keep its 7rem size. */
    @media (max-width: 899px) {
      .composer & {
        margin-bottom: 0.5rem;

        img.logo,
        svg.logo {
          width: 3.5rem !important;
        }
      }
    }

    .nav__trigger-logo img {
      height: 100%;
      max-height: 1.2625em;
      overflow: visible;
      width: auto;
    }

    svg {
      height: 100%;
      margin-inline-start: 0.4125em;
      max-height: 0.8625em;
      overflow: visible;
      width: auto;
    }

    /* The inline gem logo (shared/gem_sparkle) should behave like the
       img.logo above, not like the generic svg icon rule above. */
    .gem-sparkle svg {
      height: auto;
      margin-inline-start: 0;
      max-height: none;
    }

    .nav__trigger-logo .gem-sparkle svg {
      height: 1.2625em;
      width: auto;
    }

    kbd {
      font-size: 0.8rem;
    }

    @media (any-hover: hover) {
      &:hover {
        filter: brightness(0.9);

        .nav__trigger-logo {
          background: var(--color-ink-lighter);
        }

        @media (prefers-color-scheme: dark) {
          --input-background: var(--color-ink-lighter);
        }
      }
    }

    /* The round tile around the small gem (my/menu). Targeted at the
       class rather than `span`, so the gem-sparkle wrapper (also a span,
       for valid HTML inside this span) does not inherit it. */
    .nav__trigger-logo {
      background: #00000010;
      block-size: auto;
      border-radius: 50%;
      display: grid;
      height: 1.5em;
      inline-size: 1.5em;
      padding: 0.5em;
      place-content: center;
      width: 1.5em;
      transition: background 0.2s ease;
    }
  }

  /* Twinkling gem
  /* ------------------------------------------------------------------------
     The jump menu holds the composer link; the gem in the trigger twinkles
     periodically to draw attention to it. The animation itself lives in
     gem_sparkle_controller.js (pixel star + facet haze on canvas/SVG); this
     is only the layer setup for the shared/gem_sparkle partial. */
  .gem-sparkle {
    display: inline-grid;
    place-content: center;
    position: relative;
  }

  .gem-sparkle svg {
    display: block;
    grid-area: 1 / 1;
  }

  /* The controller sets position and size to the svg box each frame; the
     wrapper itself can stretch wider than the logo in flex/block context. */
  .gem-sparkle canvas {
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: 1;
  }

  /* Dialog
  /* ------------------------------------------------------------------------ */

  .nav__menu.popup {
    --panel-border-color: var(--color-selected-dark);
    --panel-border-radius: 1.4em;
    --panel-padding: var(--block-space);
    --panel-size: 50ch;
    --popup-display: grid;
    --nav-section-gap: .5rem;

    /* .panel's own padding-top:2rem (meant for panels without their own
       header) and the browser's default <dialog> padding both get in the
       way now that .nav__pinned supplies its own header/search padding —
       reset to 0 so that's the only source of truth. */
    padding: 0;

    block-size: auto;
    box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%),
      0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%),
      0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%),
      0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
    grid-template-rows: auto 1fr auto;
    gap: var(--nav-section-gap);
    line-height: 1.375;
    max-block-size: calc(100vh - var(--block-space) - var(--footer-height));
    overflow: hidden;
    padding-block-end: 0;
    scrollbar-gutter: stable both-edges;
    z-index: var(--z-nav);

    @media (max-height: 668px) {
      max-block-size: calc(100vh - var(--block-space));
    }
  }

  /* Let the turbo-frame's children participate in the dialog's grid so
     grid-template-rows: auto 1fr auto binds the scroll container. */
  .nav__menu turbo-frame#my_menu {
    display: contents;
  }

  .nav__scroll-container {
    display: flex;
    flex-direction: column;
    /* No uniform flex gap — the mock's rhythm isn't uniform (16px after the
       context tabs, but 6px+6px=12px between sections via each section's
       own hairline padding), so spacing between children is set on the
       children themselves below. */
    min-height: 0;
    overflow: auto;
    /* .nav__menu.popup's own grid gap (var(--nav-section-gap), 8px) already
       separates this from .nav__pinned above, so only 6px more is needed
       here to reach the mock's 14px total before the context tabs. */
    padding-block: 0.25rem 0.75rem;
    padding-inline: 0.75rem;
  }

  .nav__close {
    @media (any-hover: hover) {
      display: none !important;
    }
  }

  .nav__section {
    border-block-start: 1px solid #f4f4f5;
    font-size: var(--text-small);

    &[open] {
      padding-block-end: 0.375rem;
    }
  }

  .nav__section--secret:not([data-is-filtering]) {
    display: none;
  }

  .nav__header {
    --actions-width: 2rem;

    display: grid;
    grid-template-columns: var(--actions-width) 1fr var(--actions-width);
    grid-template-areas:
      "actions-start title actions-end";
    justify-items: center;
  }

  .nav__header-actions {
    display: flex;
    font-size: var(--text-x-small);
    gap: var(--inline-space);
    inline-size: var(--actions-width);
    min-inline-size: fit-content;
  }

  .nav__header-actions--end {
    grid-area: actions-end;
    justify-content: flex-end;
    margin-inline-start: auto;
  }

  .nav__header-actions--start {
    grid-area: actions-start;
    margin-inline-end: auto;
  }

  .nav__header-title {
    color: inherit;
    grid-area: title;
    justify-content: center;
    margin: auto;
    min-inline-size: 0;
    text-align: center;
  }

  .nav__hotkeys {
    --gap: 8px;

    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    inline-size: 100%;
    list-style: none;
    justify-content: center;
    /* Mock: 16px below the context cards, before the first section. */
    margin: 0 auto 16px;
    max-inline-size: 100%;

    /* When all its children are hidden, hide this as well so it doesn't take up space */
    &:has(.popup__item[hidden]):not(:has(.popup__item:not([hidden]))) {
      display: none;
    }

    /* Card values are in px, not rem, on purpose: the app drops html to
       14px at <=430px (application.css) while the mock's cards keep their
       px sizes — rem here rendered the cards ~12.5% too small on phones.
       Mock spec: height 74px, radius 12px, icon 20px, icon-to-label gap
       7px, label 13.5px/600, inter-card gap 8px. */
    .btn {
      --btn-border-radius: 12px;

      align-items: center;
      background-color: #f4f4f5;
      block-size: 74px;
      border-radius: 12px;
      color: #3f3f46;
      flex-basis: calc((100% - var(--gap) * 2) / 3);
      flex-direction: column;
      font-size: 13.5px;
      font-weight: 600;
      line-height: 1;
      justify-content: center;
      overflow: hidden;
      padding: 0;
      position: relative;
      row-gap: 7px;
      text-align: center;

      kbd {
        inset: 0.66em 0.33em auto auto;
        line-height: 1.4;
        opacity: 0.5;
        position: absolute;

        @media (any-hover: none) {
          /* This is a reasonable way to assert touch devices. any-pointer would seem */
          /* to be a better fit but it is incorrectly reported on many devices */
          display: none;
        }
      }

      .menu-icon {
        --icon-size: 20px !important;
      }

      span {
        display: flex;
        text-wrap: nowrap;
      }

      /* Keyboard (navigable-list) selection: neutral darker gray, not the
         generic .popup__item[aria-selected] lilac — the mock reserves
         purple for the active context card. Declared before the active
         rule so active + selected stays mock-purple. */
      &[aria-selected] {
        background-color: #e4e4e7;
      }

      &.nav__hotkeys-item--active {
        background-color: #ddd6fe;
        color: #4f46e5;
      }
    }
  }

  /* Credit line at the end of the scroll content. Hairline separates it
     from the settings section above (logged-in-as now sits after Uitloggen). */
  .nav__footer {
    border-block-start: 1px solid #f4f4f5;
    color: #a1a1aa;
    font-size: 0.78125rem;
    line-height: 1.6;
    margin-block-start: 0.375rem;
    padding: 0.75rem 0.5rem 0;
    text-align: center;

    a {
      color: inherit;
    }

    strong {
      font-weight: 500;
    }
  }

  .popup {
    --btn-background: transparent;
    --panel-border-radius: 0.5em;
    --panel-padding: var(--block-space);
    --panel-size: auto;
    --popup-icon-size: 24px;
    --popup-item-padding-inline: 0.4rem;
    --popup-display: flex;

    inset: 0 auto auto 50%;
    max-block-size: 70dvh;
    max-inline-size: min(55ch, calc(100vw - (var(--panel-padding) * 2)));
    min-inline-size: min(25ch, calc(100vw - (var(--panel-padding) * 2)));
    overflow: auto;
    position: absolute;
    transform: translateX(-50%);
    z-index: var(--z-popup);

    &[open] {
      display: var(--popup-display);
    }

    &.orient-left {
      inset-inline: auto 0;
      transform: translateX(0);
    }

    &.orient-right {
      inset-inline: 0 auto;
      transform: translateX(0);
    }

    form {
      display: contents;
    }
  }

  .popup__title {
    font-weight: 800;
    white-space: nowrap;
  }

  /* Hide lists when all the items within are hidden */
  .popup__section {
    padding-top: 0.375rem;

    &:not(:has(.popup__list)),
    &:not(:has(.popup__list > *)),
    &:has(.popup__item[hidden]):not(:has(.popup__item:not([hidden]))) {
      display: none;
    }
  }

  .popup__section-title {
    color: #71717a;
    font-size: var(--text-small);
    font-weight: 600;
    inset-block-start: 0;
    list-style: none;
    /* 0.5rem matches the item rows' own padding-inline below, so the caret
       and the icon tiles line up on a common left edge. */
    padding-inline: 0.5rem;
    position: sticky;
    text-transform: uppercase;
    z-index: 1;

    &:is(summary) {
      align-items: center;
      cursor: pointer;
      display: flex;
      gap: 0.5rem;
      min-block-size: 2.75rem;
    }

    &::-webkit-details-marker {
      display: none;
    }

    .icon--caret-down {
      font-size: 1ch;
      margin-inline-start: -0.5ch;
      transition: rotate 150ms ease-out;
    }

    .popup__section:not([open]) & {
      .icon--caret-down {
        rotate: -90deg;
      }
    }
  }

  .popup__section-title-label {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .popup__section-count {
    color: #d4d4d8;
    font-size: var(--text-x-small);
    font-weight: 400;
    text-transform: none;
  }

  .popup__list {
    display: flex;
    gap: .2rem;
    flex-direction: column;
    inline-size: 100%;
    list-style: none;
    margin: .2rem;
    max-inline-size: 100%;
    padding: 0;
    row-gap: 5px;

    details & {
      margin-inline-start: 0.75ch;
    }
  }

  .popup__item {
    align-items: center;
    background: transparent;
    border-radius: 0.3em;
    display: flex;
    gap: .5rem;
    inline-size: 100%;
    max-inline-size: 100%;

    &.popup__subject-item {
      height: 2em;
    }

    @media (any-hover: hover) {
      &:hover {
        background: var(--color-ink-lightest);
      }
    }

    .component-illustration {
      width: 2em!important;
      height: 2em!important;
    }

    .checked {
      display: none;
    }

    &[aria-checked="true"] .checked {
      display: block;
    }

    &[aria-selected] {
      background-color: var(--color-selected);

      @media (any-hover: hover) {
        &:hover {
          background-color: var(--color-selected);
        }
      }
    }
  }

  /* The actionable thing with padding within popup__item */
  .popup__btn {
    --btn-border-radius: 0.3em;
    --btn-border-size: 0;

    color: var(--color-dark-purple);
    flex: 1 1 auto;
    font-weight: 500;
    justify-content: start;
    inline-size: 100%;
    min-inline-size: 0;
    max-inline-size: 100%;
    padding: var(--inline-space-half) var(--popup-item-padding-inline);
    text-align: start;
  }

  .popup__icon {
    --icon-size: 1em;

    inline-size: var(--popup-icon-size);
    margin-inline-start: var(--popup-item-padding-inline);
  }

  .popup__radio {
    --icon-size: var(--text-x-small);

    block-size: var(--popup-icon-size);
    inline-size: var(--popup-icon-size);
    margin-inline-start: var(--popup-item-padding-inline);
    flex-shrink: 0;

    &:hover {
      --btn-border-color: var(--color-ink);
    }
  }

  /* Animated
  /* -------------------------------------------------------------------------- */

  .popup--animated {
    opacity: 0;
    transform: scale(0.2) translateX(-50%);
    transform-origin: top left;
    transition: var(--dialog-duration) allow-discrete;
    transition-property: display, opacity, overlay, transform;

    &::backdrop {
      background-color: var(--color-always-black);
      opacity: 0;
      transform: scale(1);
      transition: var(--dialog-duration) allow-discrete;
      transition-property: display, opacity, overlay;
    }

    &[open] {
      opacity: 1;
      transform: scale(1) translateX(-50%);

      &::backdrop {
        opacity: 0.5;
      }
    }

    @starting-style {
      &[open] {
        opacity: 0;
        transform: scale(0.2) translateX(-50%);
      }

      &[open]::backdrop {
        opacity: 0;
      }
    }
  }
}

.input--select {
  --input-border-radius: 2em;
  --input-padding: 0.5em 1.8em 0.5em 1.2em;

  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
  background-size: 0.5em;
  background-position: center right 0.9em;
  background-repeat: no-repeat;
  border-radius: var(--input-border-radius, 0.5em);
  text-align: start;

  @media (prefers-color-scheme: dark) {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
  }

  option {
    background-color: var(--color-canvas);
    color: var(--color-ink);
  }

  #header:has(.filters) {
    position: relative;
  }

  .filters {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1ch;
    gap: var(--inline-space-half);
    justify-content: center;
    position: relative;
    view-transition-name: "filters";

    .btn {
      --btn-border-color: var(--color-ink-medium);
      --input-background: var(--color-canvas);
    }

    &:has(.filter-toggle:hover) {
      z-index: calc(var(--z-nav) + 1);
    }
  }

  .filter {
    &[aria-selected] {
      display: flex;
    }
  }

  .filter__button {
    --btn-border-size: 0;
    --btn-font-weight: 400;
    --btn-icon-size: 0.7em;
    --btn-padding: 0.3em 0.7em;

    inline-size: 100%;
    justify-content: space-between;
    text-align: start;

    span {
      overflow: hidden;
      text-decoration: none;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    img {
      display: none;
    }

    &:has(input[type=checkbox]:checked) img {
      display: block;
    }
  }

  .filter__columns {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-block-size: 50dvh;
  }

  .filter__label {
    display: flex;
    inline-size: 100%;
    padding: 0.3em 0.7em;

    strong {
      overflow: hidden;
      text-decoration: none;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .filter__menu {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    list-style: none;
    margin: 0;
    min-inline-size: 0;
    overflow-x: auto;
    padding: 0 var(--inline-space);
    position: relative;
    row-gap: 0.2em;

    &::before {
      block-size: 100%;
      border-block: 0;
      border-inline-end: 0;
      border-inline-start: 1px solid var(--color-ink-lighter);
      content: "";
      display: inline-flex;
      inline-size: 0;
      position: absolute;
      inset: 0 auto 0 0;
    }

    &:first-child::before {
      display: none;
    }

    li {
      text-align: start;
    }
  }

  .filter__terms:is(.input) {
    --input-background: var(--color-canvas);
    --input-border-radius: 5em;
    --input-padding: 0.5em 1.3em;
    --input-width: 16em;
    --collapsed-filter-space: calc(var(--btn-size) + var(--inline-space-half) + 0.25em);

    inline-size: var(--input-width);
    min-inline-size: var(--input-width);

    .filters:not(.filters--expanded, .filters--has-filters-set) & {
      --input-padding: 0.5em 2.7em 0.5em 1.3em;

      inline-size: calc(var(--input-width) + (0.25 * var(--collapsed-filter-space)));
      margin-inline-end: calc((var(--btn-size) + var(--inline-space-half) + 0.25em) * -1);
      min-inline-size: calc(var(--input-width) + (0.25 * var(--collapsed-filter-space)));
    }
  }

  .filter-toggle {
    .filters:not(.filters--expanded, .filters--has-filters-set) & {
      --btn-background: transparent;
      --btn-border-size: 0;

      transform: translateX(calc(var(--inline-space-half) * -1));
      position: relative;
    }
  }

  .quick-filter {
    position: relative;

    &:has([aria-checked="true"]):not(.quick-filter--with-default) {
      .input--select {
        --input-background: var(--color-selected);
      }
    }

    /* Hide a quick filter if there's nothing in it to filter by */
    &:not(:has(.popup__item)) {
      display: none !important;
    }

    @media (max-width: 80ch) {
      display: none;
    }
  }

  .filters:not(.filters--expanded) {
    .quick-filter:not([data-filter-show=true]) {
      display: none;
    }
  }

  .filters.filters--expanded {
    .quick-filter {
      display: block;
    }
  }

  .filters__manage {
    display: none;
  }

  .filters--has-filters-set .filters__manage {
    display: flex;
  }

  .filters__show-when-expanded {
    .filters:not(.filters--expanded) & {
      display: none;
    }
  }

  .filters__show-when-collapsed {
    .filters--expanded & {
      display: none;
    }
  }

}


@layer base {
  kbd {
    border: 1px solid;
    border-radius: 0.3em;
    box-shadow: 0 0.1em 0 currentColor;
    font-family: ui-monospace, monospace;
    font-weight: 600;
    opacity: 0.7;
    padding: 0 0.4em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
  }
}

.panel {
  background-color: var(--panel-bg, var(--color-canvas));
  border: var(--panel-border-size, 1px) solid var(--panel-border-color, var(--color-ink-lighter));
  border-radius: var(--panel-border-radius, 1em);
  color: var(--color-ink);
  inline-size: var(--panel-size, 60ch);
  max-inline-size: 100%;
  padding-top: 2rem;
}

@media (min-width: 900px) {
  /* The menu sits inside the story rail, whose width depends on its contents.
     Keep the menu's viewport cap independent from that containing block. */
  .nav__menu.popup {
    max-inline-size: calc(100vw - (var(--panel-padding) * 2));
  }
}

/* This stays outside @layer components with .panel: unlayered styles win
   over layered ones regardless of selector specificity. Without this reset,
   .panel's generic top padding leaves a large blank band above the jump
   menu header on desktop. */
.nav__menu.popup {
  padding: 0;
}

.panel--wide {
  --panel-size: 60ch;
}

.panel--centered {
  --panel-border-size: 0;
  --panel-size: 100%;

  @media (min-width: 640px) {
    --panel-size: 42ch;
  }

  #main:has(&) {
    display: grid;
    justify-content: center;
    margin: auto;
  }
}

/* Colored icon boxes for menu items — scoped to .nav__menu even though the
   class is jump-menu exclusive today, so a future reuse elsewhere doesn't
   silently inherit this sizing. */
.nav__menu .popup__colored-icon {
  --icon-color: var(--purple);
  align-items: center;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  background-color: hsl(from var(--icon-color) calc(h - 10) s l / 0.15);
  height: 1.875rem;
  width: 1.875rem;
  /* No margin here — .nav__menu .popup__item's own padding-inline below
     places the tile, so it lines up with the section header's caret. */
  margin-inline-start: 0;
  flex-shrink: 0;
}

.nav__menu .popup__colored-icon svg {
  width: 0.9375rem;
  height: 0.9375rem;
  color: var(--icon-color);
}

.nav__menu .popup__colored-icon .menu-icon {
  --icon-size: 0.9375rem;
  color: var(--icon-color);
}

/* Larger, near-black labels and roomier rows for the jump menu specifically
   — scoped so other filter/quick-pick popups elsewhere in the app keep
   their existing (more compact) sizing. Applies at all sizes; the mobile
   media query below still tunes other (shared) popup classes. */
/* The shared .popup__section-title is sticky, but it has no background —
   scrolled rows show through it. The mock's section headers scroll in
   normal flow, so undo the stickiness for the jump menu. */
.nav__menu .popup__section-title {
  position: static;
}

.nav__menu .popup__list {
  /* The shared .popup__list has margin:.2rem plus an extra
     margin-inline-start inside <details> — that's what pushed the jump
     menu's item icons ~20px right of the section header's caret. Zero it
     here and let .nav__menu .popup__item's padding-inline (below) supply
     the same 0.5rem inset the section header uses, so they align. */
  gap: 0.125rem;
  margin: 0;
  row-gap: 0.125rem;
}

/* Scoped to .popup__list so the context tab cards (.nav__hotkeys, which
   also carry .popup__item for the filter/navigable-list controllers)
   don't inherit row sizing — being unlayered, this rule would otherwise
   beat the layered .nav__hotkeys card spec. */
.nav__menu .popup__list .popup__item {
  border-radius: 0.625rem;
  gap: 0.75rem;
  min-block-size: 3rem;
  padding-inline: 0.5rem;
}

.nav__menu .popup__btn {
  color: #27272a;
  font-size: 0.96875rem;
  font-weight: 500;
  padding-inline: 0;
}

.popup__colored-icon.subject-icon {
  --icon-color: var(--primary-blue);
}

.popup__colored-icon.templates-icon {
  --icon-color: #f5a623;
}

.popup__colored-icon.campaigns-icon {
  --icon-color: #EF4444;
}

.popup__colored-icon.review-icon {
  --icon-color: #5A3FC0;
}

.popup__colored-icon.seeds-icon {
  --icon-color: #10b981;
}

.popup__colored-icon.resources-icon {
  --icon-color: #0D9488;
}

.popup__colored-icon.authors-icon {
  --icon-color: var(--pink);
}

.popup__colored-icon.bulletins-icon {
  --icon-color: #f5a623;
}

.popup__colored-icon.stories-icon {
  --icon-color: #DB2777;
}

.popup__colored-icon.users-icon {
  --icon-color: var(--purple);
}

.popup__colored-icon.claims-icon {
  --icon-color: var(--yellow);
}

.popup__colored-icon.dashboard-icon {
  --icon-color: var(--purple);
}

.popup__colored-icon.logout-icon {
  --icon-color: #71717a;
}

/* Active row — the menu doubles as "where am I". */
.nav__menu .popup__item.popup__item--active {
  background-color: #eeebfe;
  border-radius: 0.875rem;
}

@media (any-hover: hover) {
  .nav__menu .popup__item.popup__item--active:hover {
    background-color: #eeebfe;
  }
}

.nav__menu .popup__item.popup__item--active .popup__btn {
  color: #4f46e5;
  font-weight: 600;
}

/* Jump menu header + search — pinned above the scrollable section list, at
   all sizes (was mobile-only; the full-sheet layout below the header stays
   gated to the 899px breakpoint). */
.nav__pinned {
  border-block-end: 1px solid #f4f4f5;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
}

/* Flex (not the base .nav__header's centered three-column grid): the mock
   anchors logo + title flush left as one group, close tile flush right. */
.nav__header--mobile {
  align-items: center;
  display: flex;
  gap: 0.5625rem;
  justify-content: space-between;
}

/* Override the base .nav__header-title centering (three-column grid) so the
   title anchors to the start in this two-column header. */
.nav__header--mobile .nav__header-title {
  align-items: center;
  display: flex;
  font-size: 1rem;
  font-weight: 800;
  gap: 0.5625rem;
  justify-content: flex-start;
  letter-spacing: -0.01em;
  margin: 0;
  min-inline-size: 0;
  text-align: start;
}

.nav__header--mobile .nav__header-actions--end {
  margin-inline-start: 0;
}

.nav__header-gem {
  height: 1.625rem;
  width: 1.625rem;
}

.nav__close-btn {
  align-items: center;
  background: #f4f4f5;
  border: none;
  border-radius: 0.75rem;
  color: #3f3f46;
  cursor: pointer;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  padding: 0;
  width: 44px;

  .menu-icon {
    --icon-size: 1rem;
  }

  &:active {
    background: #e4e4e7;
  }
}

.nav__search {
  position: relative;
}

.nav__search-icon {
  align-items: center;
  color: #a1a1aa;
  display: inline-flex;
  inset-block-start: 50%;
  inset-inline-start: 0.875rem;
  pointer-events: none;
  position: absolute;
  transform: translateY(-50%);

  .menu-icon {
    --icon-size: 1rem;
  }
}

.nav__search input {
  --input-background: #fafafa;
  --input-border-color: #e4e4e7;
  --input-border-radius: 100rem;
  --input-padding: 0 1.25rem 0 2.5rem;

  block-size: 3rem;

  &:focus {
    --input-background: #fff;

    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
  }
}

/* Identity meta — sibling of Uitloggen, not inside the <a>, so the global
   a:hover underline cannot paint through it. Trailing muted text, Linear-style. */
.nav__menu .popup__list .popup__item:has(.nav__logged-in-as) .popup__btn {
  flex: 1 1 auto;
  inline-size: auto;
  max-inline-size: none;
}

.nav__menu .popup__list .nav__logged-in-as {
  color: #a1a1aa;
  flex: 0 1 auto;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
  margin-inline-start: auto;
  max-inline-size: 58%;
  min-inline-size: 0;
  overflow: hidden;
  padding-inline-end: 0.15rem;
  text-align: end;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 899px) {
  .nav__menu.popup {
    --panel-border-radius: 0;
    --panel-padding: var(--block-space);

    block-size: 100dvh;
    /* Full-bleed sheet: kill the .margin-block-start-half top gap and the
       panel border, neither of which the mock's edge-to-edge sheet has. */
    border: none;
    grid-template-rows: auto 1fr;
    inset: 0;
    margin: 0;
    max-block-size: 100dvh;
    max-inline-size: 100vw;
    min-inline-size: 100vw;
    padding-block-start: env(safe-area-inset-top, 0);
  }

  /* Selector qualified with .nav__menu so it outranks the desktop
     .popup--animated { transform: scale(0.2) translateX(-50%) } rule. */
  .nav__menu.popup--animated {
    transform: translateY(2rem);
  }

  .nav__menu.popup--animated[open] {
    transform: translateY(0);
  }

  @starting-style {
    .nav__menu.popup--animated[open] {
      transform: translateY(2rem);
    }
  }

  .nav__scroll-container {
    /* Tighter floor than desktop's old 2rem; safe-area still wins on notched phones. */
    padding-block-end: max(0.75rem, env(safe-area-inset-bottom, 0));
  }

  /* 44px rows, 12px gap between tile and label, for the other (non-nav)
     filter/quick-pick popups that reuse these classes on touch devices.
     The jump menu itself gets its own always-on sizing above
     (.nav__menu .popup__item / .popup__btn / .popup__colored-icon), tuned
     to fit more sections above the fold without a collapse-composer step. */
  .popup__list {
    gap: 0;
    row-gap: 0;
  }

  .popup__list .popup__item {
    gap: 12px;
    min-block-size: 44px;
  }

  .popup__btn {
    font-size: 0.9375rem;
  }

  .popup__section {
    padding-top: 0.25rem;
  }
}