/* Local preview override. Load after the existing Atlas styles. */

/* An intrinsic grid gives all three desktop tracks the longest label's width. */
.base-view-switch {
  display: inline-grid !important;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  width: max-content !important;
  max-width: 100%;
  min-width: 0;
  flex: 0 0 auto !important;
  overflow: visible !important;
  box-sizing: border-box;
}

.base-view-switch > button {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  height: 100%;
  box-sizing: border-box;
  padding: 10px 16px;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
}

.base-view-switch > button > svg {
  flex-shrink: 0;
}

.base-view-switch .ai-tab-full {
  display: inline !important;
  min-width: 0;
}

.base-view-switch .ai-tab-short {
  display: none !important;
}

@media (max-width: 960px) {
  .base-view-bar {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .base-view-switch {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100% !important;
    max-width: 100% !important;
  }

  .base-view-switch > button,
  .base-view-switch > button[data-base-view="ai"] {
    padding: 10px 6px;
    gap: 5px;
    font-size: 10px;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .base-view-bar > .demo-access {
    align-self: flex-end;
    margin-left: 0;
  }
}

/* UI passport 2026-10-29: transparent 44px targets, glyph-only feedback. */
:is(#access-close, #ai-login-close, #edit-close, #source-close,
    #standard-close, #close-inspector, .atlas-material-close) {
  display: inline-grid !important;
  place-items: center;
  align-self: flex-start;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  box-sizing: border-box;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  color: var(--ui-text) !important;
  font-family: inherit;
  font-size: 26px !important;
  font-weight: 400;
  line-height: 1 !important;
  text-align: center;
  cursor: pointer;
  transition: color 160ms ease;
}

:is(#access-close, #ai-login-close, #edit-close, #source-close,
    #standard-close, #close-inspector, .atlas-material-close)::before,
:is(#access-close, #ai-login-close, #edit-close, #source-close,
    #standard-close, #close-inspector, .atlas-material-close)::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

:is(#access-close, #ai-login-close, #edit-close, #source-close,
    #standard-close, #close-inspector, .atlas-material-close):focus-visible,
:is(#access-close, #ai-login-close, #edit-close, #source-close,
    #standard-close, #close-inspector, .atlas-material-close):active {
  color: var(--ui-accent-ink) !important;
}

@media (hover: hover) {
  :is(#access-close, #ai-login-close, #edit-close, #source-close,
      #standard-close, #close-inspector, .atlas-material-close):hover {
    color: var(--ui-accent-ink) !important;
  }
}

/* The material window fills the viewport; no desktop size ceiling remains. */
#atlas-material-dialog {
  position: fixed;
  inset: 0;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
}

#atlas-material-dialog .atlas-material-header {
  position: relative;
  box-sizing: border-box;
  min-height: calc(max(12px, env(safe-area-inset-top, 0px)) + 56px);
  padding: 12px 76px 12px 20px;
  padding-top: max(12px, env(safe-area-inset-top, 0px));
  padding-right: calc(max(12px, env(safe-area-inset-right, 0px)) + 56px);
}

#atlas-material-dialog .atlas-material-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: auto;
  left: auto;
}

@media (max-width: 760px) {
  #atlas-material-dialog .atlas-material-header {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(#access-close, #ai-login-close, #edit-close, #source-close,
      #standard-close, #close-inspector, .atlas-material-close) {
    transition: none;
  }
}