/* Phones and tablets (the mobile pass of 2026-10-10, qa/nav-mobile/). Loaded last of the shell's styles, so it wins
   ties with them; every rule sits behind a phone/tablet or touch query, so a desktop with a mouse draws exactly as before.
   Lazy-loaded styles (admin, agent home, people, editor, launch, crm) carry their own phone rules. */

/* iOS Safari zooms the page into any text field under 16 px when it gets the focus: every field reads 16 px on a
   phone, a tablet and any touch screen */
@media (max-width: 1023px), (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=image]),
  select:not([data-n1]):not([data-n2]):not([data-n3]), textarea:not([data-n1]):not([data-n2]):not([data-n3]) { font-size: 16px; } /* the :not()s lift these over a component's own size (.ln-list select) */
  /* WebKit draws a native select about 25 px tall whatever min-height says: every select draws its own box and arrow
     (as select.field-select does on a desktop), 38 px tall; the arrow's grey reads on the light and the dark screens */
  select:not([multiple]):not([size]):not([data-n3]) { -webkit-appearance: none; appearance: none; min-height: 38px; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23857E73' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
}

@media (max-width: 1023px) {
  /* checkboxes beside a sentence: a 24 px target (WCAG 2.5.8) */
  label.row > input[type=checkbox], label.row > input[type=radio] { width: 20px; height: 20px; margin: 2px; flex: none; accent-color: var(--accent); }
  label.row:has(> input[type=checkbox]), label.row:has(> input[type=radio]) { min-height: 24px; flex-wrap: nowrap; align-items: flex-start; } /* the sentence stays beside its box instead of wrapping under it */
  /* the source link on a swipe card and a brand's website link were 14-16 px tall: same look, a 24 px target */
  .qbadge a, .brd-who a.small { display: inline-block; padding: 5px 0; margin: -5px 0; }
}

/* A button never gets wider than the column it sits in: a long label wraps to a second line on a phone. (The AI
   helper check puts "Checking the AI helper… (up to 20 s)" on any AI button: 290 px, 16 px wider than the carousel
   editor's panel at 320 px.) Grids that held such a button sized their column to it; they now shrink with the screen. */
@media (max-width: 600px) {
  .btn { white-space: normal; max-width: 100%; }
  .inf-panel { grid-template-columns: minmax(0, 1fr); }
}

/* Dialogs on phones: a sheet the width of the screen. One with fields to fill (a form, a search) takes the whole
   screen, so the keyboard never covers it; a short one (a question, a choice) sits on the bottom edge. The big
   pickers (.big), the menu, and the side panels (Agent home drawer, sheets, CRM) keep their own phone layouts. */
@media (max-width: 600px) {
  dialog:not(.big):not(.nav-sheet):not(.bd):not(.mc-sheet):not(.crm-dialog) { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: auto 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; overflow: auto; overscroll-behavior: contain; }
  dialog:not(.big):not(.nav-sheet):not(.bd):not(.mc-sheet):not(.crm-dialog):has(textarea, select, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden])) { height: 100dvh; margin: 0; border-top: 0; border-radius: 0; }
}

/* Sounds: the seven-column table becomes one card per sound on a phone (labels from data-label) */
@media (max-width: 760px) {
  table.snd-table, .snd-table tbody, .snd-table tr, .snd-table td { display: block; }
  table.snd-table { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .snd-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .snd-table tbody { display: grid; gap: 10px; }
  .snd-table tr { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px 12px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
  table.snd-table td { padding: 0; border: 0; max-width: none !important; }
  .snd-table td[data-label=Sources] { display: flex; flex-wrap: wrap; gap: 0 16px; }
  .snd-table td[data-label=Sources]::before { flex-basis: 100%; }
  .snd-table td[data-label=Sources] > div { padding: 3px 0; } /* sources side by side on 25 px lines: far enough apart to tap */
  .snd-table td:nth-child(1) { grid-row: 1; grid-column: 1; }
  .snd-table td:nth-child(2) { grid-row: 1; grid-column: 2; }
  .snd-table td:nth-child(n+3) { grid-column: 1 / -1; }
  .snd-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .snd-table td:last-child .btn { width: 100%; justify-content: center; min-height: 44px; }
  .snd-wrap { overflow: visible !important; }
}

/* For you's Trend radar: twelve stacked cards pushed the ready-made posts 2,500 px down a phone. On a phone the radar
   is one row that swipes sideways (the next card peeks in), and the posts follow straight after it. */
@media (max-width: 760px) {
  .radar > .radar-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: thin; }
  .radar > .radar-list > .radar-item { scroll-snap-align: start; }
}

/* The carousel editor's Save/Export bar sticks under the top bar, which is 56 px (+1 px line) on phones and tablets
   instead of 60: at 60 px a 3 px strip of the scrolling slides showed between the two (768 px). */
@media (max-width: 1023px) { .inf-ed-head { top: 57px; } }