/*
  Website Infrastructure Console — Mobile Header & Layout Repair V17
  Keeps both version and GitHub controls visible and prevents mobile clipping.
*/

:root {
  --infra-mobile-gutter: clamp(.75rem, 3.5vw, 1.25rem);
}

body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] {
  overflow-x: clip !important;
}

body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root,
body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root > div,
body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root main,
body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root section {
  min-width: 0 !important;
  max-width: 100% !important;
}

body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root img,
body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root svg,
body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root canvas {
  max-width: 100% !important;
  height: auto;
}

@media (max-width: 900px) {
  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root header {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root header > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: .85rem var(--infra-mobile-gutter) !important;
  }

  /* Main header becomes two clean rows: brand first, controls second. */
  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root header > .container > .flex.items-center.justify-between {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .8rem !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root header > .container > .flex.items-center.justify-between > .flex:first-child {
    width: 100% !important;
    min-width: 0 !important;
    align-items: flex-start !important;
    gap: .7rem !important;
  }

  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root header > .container > .flex.items-center.justify-between > .flex:first-child > .w-10 {
    width: 2.65rem !important;
    height: 2.65rem !important;
    min-width: 2.65rem !important;
    flex: 0 0 2.65rem !important;
  }

  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root header h1.chaos-title {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(1.05rem, 5.4vw, 1.5rem) !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
    overflow: visible !important;
  }

  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root header h1.chaos-title .chaos-letter {
    flex: 0 0 auto !important;
    padding: .04em .09em !important;
  }

  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root header h1.chaos-title .chaos-space {
    flex: 0 0 .28em !important;
    width: .28em !important;
  }

  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root header h1 + p {
    max-width: 44ch !important;
    margin-top: .38rem !important;
    font-size: clamp(.72rem, 2.7vw, .86rem) !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* The two circled controls are always both visible and touch friendly. */
  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root header > .container > .flex.items-center.justify-between > .flex:last-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: .6rem !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: visible !important;
  }

  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root header > .container > .flex.items-center.justify-between > .flex:last-child > * {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root header a[href*="github.com"] svg {
    margin-right: .45rem !important;
    flex: 0 0 1rem !important;
  }

  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root > div.relative > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.1rem var(--infra-mobile-gutter) 2rem !important;
  }

  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root main {
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root .neon-card,
  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root [class*="rounded-xl"],
  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root [class*="rounded-lg"] {
    max-width: 100% !important;
  }

  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root pre {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root .relative > button,
  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root button {
    max-width: 100% !important;
  }

  /* Reserve space so the install-ready control never covers the final card. */
  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] .pwa-install-fab {
    left: auto !important;
    right: max(.75rem, env(safe-area-inset-right, 0px)) !important;
    bottom: max(.75rem, calc(env(safe-area-inset-bottom, 0px) + .55rem)) !important;
    width: max-content !important;
    max-width: min(13rem, calc(100vw - 1.5rem)) !important;
    min-height: 48px !important;
  }
}

@media (max-width: 360px) {
  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root header > .container > .flex.items-center.justify-between > .flex:last-child {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root header h1.chaos-title {
    font-size: 1rem !important;
  }
}

@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  body[data-project-key="WEBSITE_INFRASTRUCTURE_CONSOLE"] #root {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px)) !important;
  }
}