/* Phone fixes shared by pages whose precompiled Tailwind file has no responsive rules (2026-11-04).
   Loaded after each page's own stylesheet. Everything is inside the media query: desktop is untouched. */
@media (max-width: 640px) {
    /* A wide child must not stretch a whole grid (the usual reason a phone shrinks the page to fit). */
    .grid > * { min-width: 0; }
    img, video { max-width: 100%; }
    pre { max-width: 100%; overflow-x: auto; }

    /* Page headers that were one rigid row now wrap. */
    header .justify-between { flex-wrap: wrap; gap: 8px 12px; }
    header nav { flex-wrap: wrap; gap: 0 16px; }
    header nav a { display: inline-block; padding: 8px 0; }
    header .flex.items-center.gap-2 { flex-wrap: wrap; }
    header a, header button { min-height: 36px; }

    /* Chat-style headers: one fixed-height row, so the icon group is made smaller instead of wrapping. */
    header .ml-auto.flex { flex-shrink: 0; gap: 0; }
    header .ml-auto.flex > button, header .ml-auto.flex > select { padding: 6px; min-height: 36px; min-width: 36px; }

    header .ml-auto.flex { margin-left: auto; }
    header .h-14 { height: auto; min-height: 56px; flex-wrap: wrap; row-gap: 4px; padding-top: 6px; padding-bottom: 6px; }
    header .min-w-0 { min-width: 0; overflow: hidden; }
    header .min-w-0 h1, header .min-w-0 p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Pricing */
    body > nav { flex-wrap: wrap; gap: 8px; padding-left: 16px; padding-right: 16px; }
    body > nav > div { flex-wrap: wrap; }
    #account-chip { max-width: 100%; flex-wrap: wrap; }

    /* Landing page navbar: let it grow to two rows instead of running off the screen. */
    nav.glass .h-16 { height: auto !important; min-height: 64px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; row-gap: 6px; }
    #user-menu, #auth-buttons { flex-wrap: wrap; gap: 2px 6px !important; justify-content: flex-end; }
    #user-menu a, #user-menu button, #auth-buttons a, #auth-buttons button { padding: 8px 10px !important; }
    #user-email { display: none; }

    /* User guide: one column; the contents list becomes tappable chips. */
    main.grid { grid-template-columns: minmax(0, 1fr); }
    aside.toc { display: flex; flex-wrap: wrap; gap: 6px; position: static; }
    aside.toc > div { width: 100%; }
    aside.toc a { display: inline-block; padding: 8px 12px; border-radius: 999px; background: rgba(148, 163, 184, .18); }

    /* API keys form */
    #create-key-form { flex-wrap: wrap; }
    #create-key-form > input { flex: 1 1 100%; }
    #create-key-form > button { width: 100%; min-height: 44px; }

    /* Tab strips scroll sideways instead of widening the page. */
    .w-fit { max-width: 100%; overflow-x: auto; }

    /* Stretchy flex children (the main column of the vision page, etc.) must be allowed to shrink below their content. */
    .flex-1 { min-width: 0; }

    /* Wide tables scroll inside their own box. */
    article table { display: block; max-width: 100%; overflow-x: auto; }

    /* Vision: the camera/analysis panel (a third of the width) and the chat sit side by side. On a phone they stack, chat first. */
    body > div.flex.h-screen { flex-direction: column; height: auto; min-height: 100vh; }
    body > div.flex.h-screen > .w-1\/3 { width: 100%; order: 2; padding-bottom: 96px; }
    body > div.flex.h-screen > .flex-1 { order: 1; }
    body > div.flex.h-screen #messages { min-height: 45vh; max-height: 65vh; }

    /* Arcadia: its own grids collapse to one shrinkable column. */
    .grid-r, .grid-c { grid-template-columns: minmax(0, 1fr); }
    .grid-r > *, .grid-c > * { min-width: 0; }
}

/* The smallest phones: the chat header icon group is tightened so it still fits. */
@media (max-width: 380px) {
    header .ml-auto.flex > button, header .ml-auto.flex > select { padding: 4px; min-width: 32px; }
}