/* MAPEX Hub skin, continued from the previous part (the 800-line rule); load order matters. */

/* ===================================================================== print */

@media print {
  :root {
    --ink: #000;
    --paper: #fff;
    --paper-raised: #fff;
  }

  .mx-progress,
  .mx-theme {
    display: none !important;
  }

  .scroll-x {
    max-block-size: none;
    overflow: visible;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view:empty::before,
  .view:empty::after,
  .view > :first-child,
  .btn[data-busy]::after {
    animation-duration: 0.001ms !important;
  }

  .btn,
  .nav__heading,
  .nav__link,
  .mx-progress.is-on,
  .mx-progress.is-done {
    transition: none !important;
  }

  .btn[data-busy]::after {
    animation: none;
    border-block-start-color: var(--ink-faint);
  }
}

/* ================================================== quick jump (palette.js) */

.mx-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  block-size: 2.15rem;
  padding-inline: 0.7rem 0.45rem;
  border: 1px solid var(--rule);
  border-radius: var(--mx-radius);
  background: var(--paper-raised);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 120ms ease,
    transform 120ms var(--mx-ease);
}

.mx-jump:hover {
  background: var(--mx-surface-2);
  color: var(--ink);
}

.mx-jump:active {
  transform: scale(0.97);
}

kbd {
  font-family: var(--sans);
  font-size: 0.72rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--rule);
  border-block-end-width: 2px;
  border-radius: 5px;
  background: var(--mx-surface-2);
  color: var(--ink-soft);
  direction: ltr;
  unicode-bidi: isolate;
}

.mx-palette {
  inline-size: min(38rem, calc(100vw - 2rem));
  max-block-size: min(32rem, calc(100dvh - 6rem));
  margin-block-start: 12vh;
  padding: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
}

.mx-palette[open] {
  display: flex;
}

.mx-palette::backdrop {
  background: var(--mx-scrim);
}

.mx-palette__field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-block-end: 1px solid var(--rule);
  color: var(--ink-faint);
}

.mx-palette__field svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  flex: none;
}

.mx-palette__field input {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.mx-palette__list {
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mx-palette__list [role='option'] {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--mx-radius);
  cursor: pointer;
  color: var(--ink);
}

.mx-palette__list [aria-selected='true'] {
  background: var(--mx-primary-soft);
  color: var(--mx-primary);
}

.mx-palette__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 1.9rem;
  block-size: 1.9rem;
  border-radius: 8px;
  background: var(--mx-surface-2);
  color: var(--ink-soft);
  flex: none;
}

.mx-palette__icon svg {
  inline-size: 1rem;
  block-size: 1rem;
}

[aria-selected='true'] .mx-palette__icon {
  background: var(--paper-raised);
  color: var(--mx-primary);
}

.mx-palette__label {
  flex: 1;
  font-weight: 500;
}

.mx-palette__group {
  font-size: 0.76rem;
  color: var(--ink-faint);
}

.mx-palette__empty {
  padding: 1.5rem;
  text-align: center;
  color: var(--ink-soft);
}

.mx-palette__foot {
  margin: 0;
  padding: 0.55rem 1rem;
  border-block-start: 1px solid var(--rule);
  font-size: 0.75rem;
  color: var(--ink-faint);
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

@media (max-width: 620px) {
  .mx-jump span {
    display: none;
  }
}

.is-signed-out .mx-jump {
  display: none;
}

/* ===================================================== collapsible sidebar */
/*
 * Folded (feel.js `data-nav="collapsed"`), the menu is a 4.25rem rail of
 * section icons. Names live in tooltips; the screens under a section show
 * when the reader opens the menu again. Desktop only: phones use the drawer.
 */

.mx-fold {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  margin-inline-start: auto;
  flex: none;
  border: 1px solid transparent;
  border-radius: var(--mx-radius);
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition:
    background-color 120ms ease,
    color 120ms ease,
    transform 160ms var(--mx-ease);
}

.mx-fold:hover {
  background: var(--mx-surface-2);
  color: var(--ink);
}

.mx-fold:active {
  transform: scale(0.94);
}

.mx-fold svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
}

/* The arrow points where the rail will go: toward the content when open. */
html[dir='ltr'] .mx-fold svg {
  transform: scaleX(-1);
}

@media (min-width: 1001px) {
  .app {
    transition: grid-template-columns 200ms var(--mx-ease);
  }

  :root[data-nav='collapsed'] {
    --sidebar-w: 4.25rem;
  }

  :root[data-nav='collapsed'] .mx-fold svg {
    transform: scaleX(-1);
  }

  html[dir='ltr'][data-nav='collapsed'] .mx-fold svg {
    transform: none;
  }

  :root[data-nav='collapsed'] .sidebar__brand {
    flex-direction: column;
    gap: 0.6rem;
    padding-inline: 0;
    align-items: center;
  }

  :root[data-nav='collapsed'] .mx-fold {
    margin-inline-start: 0;
  }

  :root[data-nav='collapsed'] .sidebar__name,
  :root[data-nav='collapsed'] .nav__list,
  :root[data-nav='collapsed'] .nav__chevron,
  :root[data-nav='collapsed'] .nav__label,
  :root[data-nav='collapsed'] .nav__dot,
  :root[data-nav='collapsed'] .sidebar__foot {
    display: none;
  }

  /* A top-level link's name is a bare text node: folded, only its icon shows. */
  :root[data-nav='collapsed'] .nav__heading,
  :root[data-nav='collapsed'] .nav__link {
    justify-content: center;
    margin-inline: 0.55rem;
    padding-inline: 0;
    font-size: 0;
    gap: 0;
  }

  :root[data-nav='collapsed'] .nav__icon {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  /* The section holding the current screen keeps its mark while folded. */
  :root[data-nav='collapsed'] .nav__section--current > .nav__heading {
    background: var(--mx-primary-soft);
  }

  :root[data-nav='collapsed'] .nav__section--current > .nav__heading .nav__icon {
    color: var(--mx-primary);
  }
}

@media (max-width: 1000px) {
  .mx-fold {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app {
    transition: none;
  }
}