/* Mobile layout only. Desktop styling, content, and application state are unchanged. */
@media screen and (max-width: 1023px) {
  body:has(> header.no-print) { -webkit-text-size-adjust:100%; }
  body:has(> header.no-print) :is(main,header,div,section,article,nav,form) { min-width:0; }
  body:has(> header.no-print) :is(p,h1,h2,h3,h4,span,label,td,th) { overflow-wrap:anywhere; }
  body:has(> header.no-print) :is(button,a,select,input,textarea) { touch-action:manipulation; }
  body:has(> header.no-print) :is(button,select,input:not([type=checkbox]):not([type=radio]),textarea) { min-height:48px; max-width:100%; }
  body:has(> header.no-print) :is(input,select,textarea) { font-size:16px; }
  body:has(> header.no-print) :is(button,a).flex { min-height:48px; }
  body:has(> header.no-print) button { white-space:normal; }
  body:has(> header.no-print) .text-xs { font-size:14px; line-height:1.5; }
  body:has(> header.no-print) :is(.text-\[9px\],.text-\[10px\],.text-\[11px\]) { font-size:12px; line-height:1.5; }
  body:has(> header.no-print) .text-sm { font-size:16px; line-height:1.5; }
  body:has(> header.no-print) :is(h1,h2,h3).flex { flex-wrap:wrap; }
  body:has(> header.no-print) .flex:not(button):not(a):not(.flex-col):not(.overflow-x-auto) { flex-wrap:wrap; }
  body:has(> header.no-print) :is(button,a) > svg { flex-shrink:0; }
  /* Let the page scroll, instead of stacking two tall sticky toolbars. */
  body > header.no-print { position:relative; padding:12px 16px; }
  body > header.no-print > div { gap:12px; }
  body > header.no-print nav { width:100%; order:3; display:flex; flex-wrap:wrap; gap:4px; }
  body > header.no-print nav a { flex:1 1 80px; justify-content:center; padding:10px 8px; font-size:14px; gap:6px; }
  body > header.no-print nav a span { white-space:nowrap; }
  body > header.no-print > div > div:last-child { margin-left:auto; }
  body:has(> header.no-print) main .sticky { position:relative; top:auto; }
  body:has(> header.no-print) main :is(.grid,.flex) > * { min-width:0; }
  body:has(> header.no-print) main > div > .sticky > .flex { width:100%; }
  /* Numeric cards and document fields retain their values; long IDs wrap. */
  body:has(> header.no-print) .font-mono { font-variant-numeric:tabular-nums; }
  body:has(> header.no-print) .overflow-x-auto { max-width:100%; overscroll-behavior-x:contain; }
  body:has(> header.no-print) .overflow-x-auto table { min-width:640px; }
  body:has(> header.no-print) .fixed.inset-0 { z-index:80; max-height:100dvh; overflow-y:auto; overscroll-behavior:contain; }
  body:has(> header.no-print) .fixed.inset-0 > .max-h-\[94vh\] { max-height:calc(100dvh - 24px); }
  body:has(> header.no-print) .fixed.inset-0 .sticky { position:relative; top:auto; }
  /* Photo viewer: scrollable metadata, a real image area, and reachable controls. */
  body:has(> header.no-print) .fixed.inset-0.select-none { justify-content:flex-start; padding:12px; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  body:has(> header.no-print) .fixed.inset-0.select-none > div { flex-shrink:0; }
  body:has(> header.no-print) .fixed.inset-0.select-none > .flex-1 { flex:0 0 48svh; min-height:280px; width:100%; }
  body:has(> header.no-print) .fixed.inset-0.select-none img { max-height:44svh; max-width:100%; }
  body:has(> header.no-print) .fixed.inset-0.select-none .absolute.bottom-4 { left:8px; right:8px; bottom:8px; padding:8px; font-size:12px; gap:6px; }
  body:has(> header.no-print) .fixed.inset-0.select-none .absolute.bottom-4 span { font-size:12px; }
  body:has(> header.no-print) .fixed.inset-0.select-none h1 { font-size:22px; line-height:1.25; }
  body:has(> header.no-print) .fixed.inset-0.select-none .max-w-6xl { padding:12px; }
  body:has(> header.no-print) .fixed.inset-0.select-none .max-w-6xl > .flex { gap:8px; }
}
@media screen and (max-width: 599px) {
  body:has(> header.no-print) main .p-6 { padding:16px; }
  body:has(> header.no-print) main .p-5 { padding:16px; }
  body:has(> header.no-print) main .px-6 { padding-left:16px; padding-right:16px; }
  body:has(> header.no-print) main .gap-6 { gap:16px; }
  body:has(> header.no-print) main .grid-cols-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body:has(> header.no-print) .fixed .bg-white.p-6 { padding:12px; }
  body:has(> header.no-print) main > div > .sticky > .flex > button { flex:1 1 140px; margin-left:0; padding:12px; }
  body:has(> header.no-print) main > div > .sticky > .flex > button > .flex-col { flex:1; }
  body:has(> header.no-print) .fixed.inset-0 .grid-cols-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body:has(> header.no-print) .fixed.inset-0 .bg-white .grid-cols-2 { grid-template-columns:minmax(0,1fr); }
  body:has(> header.no-print) .fixed.inset-0 .bg-white .grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media screen and (max-width:1023px) {
  body > header.no-print nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  body > header.no-print nav a { flex-wrap:wrap; text-align:center; align-content:center; }
  body > header.no-print nav a span { white-space:normal; }
  body:has(> header.no-print) main > div > .sticky > .flex > button { flex:1 1 250px; margin-left:0; }
  body:has(> header.no-print) main > div > .sticky > .flex > button > .flex-col { flex:1; }
  body:has(> header.no-print) button[title*="test photo"] span,
  body:has(> header.no-print) button[title*="Simulate a new live"] span { display:inline; }
}
@media screen and (max-width:1023px) {
  body > header.no-print nav a { flex-direction:column; gap:4px; }
  body:has(> header.no-print) button[title*="snapping a new"] span { display:inline; }
  body:has(> header.no-print) button[title*="snapping a new"] { justify-content:center; }
}
@media screen and (min-width:1024px) and (max-width:1199px) {
  body:has(> header.no-print) main :is(.flex,.grid) > * { min-width:0; }
  body:has(> header.no-print) main .flex:not(button):not(a):not(.flex-col):not(.overflow-x-auto) { flex-wrap:wrap; }
  body:has(> header.no-print) main :is(span,p,h2,h3) { overflow-wrap:anywhere; }
}
@media screen and (max-width:1023px) {
  body:has(> header.no-print) :is(input,select,textarea) { font-size:16px; }
  body:has(> header.no-print) button { min-width:48px; }
}
@media screen and (max-width:599px) {
  body:has(> header.no-print) .fixed.inset-0 .bg-white .grid-cols-2 > * { grid-column:1 / -1; padding-top:6px; padding-bottom:6px; }
  body:has(> header.no-print) .fixed.inset-0 .bg-white .flex > span:first-child { overflow-wrap:normal; }
}