/*
 * OCFai CSS contract
 * AI_RULE: define only classes matching OCFAI_ALLOWED_PREFIXES in this file.
 * AI_RULE: shared UI patterns must use their canonical component CSS instead of local variants.
 * OCFAI_ROLE: component
 * OCFAI_ALLOWED_PREFIXES: mk-bar, mk-bar__, mk-menu, mk-menu--
 */
/* Component: mk_bar */
.mk-bar {
  position: relative;
  z-index: 30;
  height: var(--mk-bar-height);
  padding: 0 var(--mk-space-11);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mk-space-7);
}

.mk-bar__desktop {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--mk-space-7);
}

.mk-menu--bar-desktop {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.mk-bar__mobile {
  --mk-bar-panel-display: none;
  display: none;
}

.mk-bar__summary {
  display: none;
}

.mk-bar__icon {
  width: var(--mk-icon-size-md);
  height: var(--mk-icon-size-md);
  display: block;
}

.mk-bar__icon--close {
  display: none;
}

.mk-bar__panel {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--mk-space-7);
}

.mk-bar__action {
  flex: 0 0 auto;
}

@media (max-width: 991.98px) {
  .mk-bar {
    padding: 0 var(--mk-space-6);
    gap: var(--mk-space-3);
  }

  .mk-bar__desktop {
    display: none;
  }

  .mk-bar__mobile {
    display: block;
    flex: 0 0 auto;
    order: 3;
  }

  .mk-bar__summary {
    width: var(--mk-button-icon-size-sm);
    height: var(--mk-button-icon-size-sm);
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--mk-radius-md);
    background: transparent;
    cursor: pointer;
    list-style: none;
    transition: color var(--mk-motion-fast), background-color var(--mk-motion-fast);
  }

  .mk-bar__summary::-webkit-details-marker {
    display: none;
  }

  .mk-bar__summary:hover {
    background: rgb(var(--mk-accent-rgb) / .06);
  }

  .mk-bar__summary:focus-visible {
    outline: 2px solid rgb(var(--mk-accent-rgb) / .18);
    outline-offset: 2px;
  }

  .mk-bar__panel.mk-menu {
    position: absolute;
    left: auto;
    right: var(--mk-space-6);
    top: calc(var(--mk-bar-height) + var(--mk-space-0-5));
    z-index: 20;
    width: min(288px, calc(100vw - 32px));
    max-height: calc(100vh - var(--mk-bar-height) - var(--mk-space-4));
    display: none;
    align-items: stretch;
    justify-content: stretch;
    gap: var(--mk-space-0-5);
    overflow-y: auto;
    padding: var(--mk-space-2);
    text-align: left;
    border: 1px solid rgb(var(--mk-dark-rgb) / .08);
    border-radius: var(--mk-card-radius);
    background: rgb(var(--mk-light-rgb) / .9);
    box-shadow: var(--mk-shadow-feature-tile);
    backdrop-filter: blur(var(--mk-blur-header));
  }

  .mk-bar__panel-action {
    display: flex;
    justify-content: center;
    margin-top: var(--mk-space-0-5);
    padding-top: var(--mk-space-2);
    border-top: 1px solid var(--mk-color-line);
  }

  .mk-bar__mobile[open] .mk-bar__panel {
    display: grid;
  }

  .mk-bar__mobile[open] .mk-bar__icon--menu {
    display: none;
  }

  .mk-bar__mobile[open] .mk-bar__icon--close {
    display: block;
  }
}