/* Reproducible Notebook Lab — Mobile Card Fix V8
   Keeps the OpsDesk Neon Chaos identity while preventing clipped labels,
   badges, long stack names, and decorative shadows on narrow screens. */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip !important;
}

#root,
#root * {
  min-width: 0;
  box-sizing: border-box;
}

#root p,
#root li,
#root code,
#root pre,
#root span,
#root label,
#root h1,
#root h2,
#root h3,
#root h4,
#root h5,
#root h6 {
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 700px) {
  .neon-statusbar {
    min-height: 44px;
    padding-left: max(.65rem, env(safe-area-inset-left));
    padding-right: max(.65rem, env(safe-area-inset-right));
  }

  .neon-statusbar strong {
    min-width: 0;
    max-width: 58vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #root header > div,
  #root main,
  #root main > div,
  #root .container {
    width: 100% !important;
    max-width: 100% !important;
  }

  #root main {
    padding-left: .75rem !important;
    padding-right: .75rem !important;
  }

  /* All recommendation cards must remain inside the mobile viewport. */
  #root .neon-card,
  #root .neon-card:hover,
  #root .neon-card:focus-within {
    width: calc(100% - 5px) !important;
    max-width: calc(100% - 5px) !important;
    min-width: 0 !important;
    margin: .9rem 5px 1rem 0 !important;
    padding: 1rem !important;
    transform: none !important;
    overflow: hidden !important;
    border-width: 3px !important;
    border-radius: 2px 18px 2px 14px !important;
    box-shadow: 5px 5px 0 var(--neon-card-shadow) !important;
  }

  /* Put the decorative module label inside the card instead of beyond its edge. */
  #root .neon-card::before {
    position: static !important;
    display: block !important;
    float: none !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: -.2rem 0 .9rem auto !important;
    padding: .28rem .5rem !important;
    transform: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25 !important;
    text-align: right;
  }

  #root .neon-card > *,
  #root .neon-card [class*="flex"],
  #root .neon-card [class*="grid"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Two-column form groups and metadata rows become one readable column. */
  #root .neon-card .grid-cols-2,
  #root .neon-card [class~="grid-cols-2"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #root .neon-card .flex.items-start.justify-between,
  #root .neon-card .flex.items-center.justify-between {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: .65rem !important;
  }

  #root .neon-card h3,
  #root .neon-card .text-xl {
    font-size: clamp(1.05rem, 5.5vw, 1.35rem) !important;
    line-height: 1.18 !important;
  }

  #root .neon-card p,
  #root .neon-card li {
    max-width: 100% !important;
    line-height: 1.58 !important;
  }

  /* Tailwind badges default to nowrap; allow long technology names to wrap. */
  #root .neon-card [data-slot="badge"],
  #root .neon-card .whitespace-nowrap,
  #root .neon-card code,
  #root .neon-card .neon-button {
    width: fit-content;
    max-width: 100% !important;
    height: auto !important;
    min-height: 30px;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
    text-align: left;
  }

  #root .neon-card [data-slot="badge"] {
    display: inline-flex !important;
    align-items: center;
    padding-top: .3rem !important;
    padding-bottom: .3rem !important;
  }

  #root .neon-card .text-foreground\/70,
  #root .neon-card [class*="text-foreground/"],
  #root .neon-card [class*="text-muted-foreground"] {
    color: #3f3f46 !important;
    opacity: 1 !important;
  }

  #root .neon-card .text-xs.font-medium,
  #root .neon-card .text-xs.font-semibold {
    color: #27272a !important;
    opacity: 1 !important;
  }

  /* The six stack cards use a single-column grid with comfortable spacing. */
  #root main .grid.md\:grid-cols-2 {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.15rem !important;
  }

  #root [role="tablist"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 390px) {
  #root main {
    padding-left: .6rem !important;
    padding-right: .6rem !important;
  }

  #root .neon-card,
  #root .neon-card:hover,
  #root .neon-card:focus-within {
    width: calc(100% - 4px) !important;
    max-width: calc(100% - 4px) !important;
    margin-right: 4px !important;
    padding: .85rem !important;
    box-shadow: 4px 4px 0 var(--neon-card-shadow) !important;
  }

  #root .neon-card .text-4xl {
    font-size: 2rem !important;
  }
}