/* Touch layouts for the secondary portal; desktop and print remain unchanged. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--accent-cyan);
    outline-offset: 3px;
}

@media screen and (max-width: 1023px) {
    html { scroll-padding-top: 16px; }
    body { font-size: 16px; line-height: 1.7; }
    .portal-container { padding-inline: max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-left)); }
    #portal-header { position: relative; padding-top: max(16px, env(safe-area-inset-top)); margin-bottom: 16px; }
    .header-flex { flex-direction: column; align-items: stretch; gap: 16px; }
    .brand-box { min-width: 0; align-items: flex-start; }
    .brand-box > span { flex-shrink: 0; }
    .brand-box h1 { font-size: 18px; line-height: 1.6; }
    .brand-box p { font-size: 12px; }
    .header-flex > .flex { flex-wrap: wrap; gap: 8px; }
    .header-flex .btn-science-secondary { padding-inline: 12px; flex: 1 1 auto; justify-content: center; }
    #theme-light-btn, #theme-dark-btn { width: 44px; border: 1px solid var(--border-color); background: var(--bg-main); border-radius: 50%; }
    #portal-tab-bar { display: flex; max-width: 100%; overflow-x: auto; gap: 6px; padding: 6px; margin-bottom: 20px; overscroll-behavior-x: contain; scrollbar-width: thin; }
    #portal-tab-bar .tab-btn { flex: 0 0 auto; white-space: nowrap; padding: 10px 16px; }
    .flex-col { flex-direction: column; }
    .flex-wrap { flex-wrap: wrap; }
    .flex-1 { flex: 1; min-width: 0; }
    .grid { min-width: 0; }
    .grid-cols-1 { grid-template-columns: minmax(0, 1fr); }
    .grid > *, .flex > *, .tab-pane { min-width: 0; }
    .science-card { padding: 20px; max-width: 100%; }
    .science-card:hover { transform: none; }
    .science-card p { font-size: 16px; }
    .text-xs, .text-sm, .tab-btn, .pill-filter,
    .btn-science-primary, .btn-science-secondary, th, td { font-size: 14px; }
    button, .btn-science-primary, .btn-science-secondary, .pill-filter { min-height: 44px; }
    .btn-science-primary, .btn-science-secondary { line-height: 1.6; justify-content: center; }
    input, select, textarea { font-size: 16px !important; min-height: 44px; max-width: 100%; min-width: 0; }
    input[type="range"] { padding-inline: 0; }
    .tab-pane > .flex { flex-wrap: wrap; }
    #tab-dashboard .science-card > .mt-6.flex { flex-wrap: wrap; }
    #tab-dashboard .science-card > .mt-6.flex > button { flex: 1 1 240px; }
    .chatbot-grid { flex-direction: column; height: auto; }
    .chat-window-panel { flex: none; height: 70svh; min-height: 420px; max-height: 700px; }
    .chat-window-panel > header { padding: 16px; flex-wrap: wrap; gap: 8px; }
    .chat-window-panel footer { flex-direction: column-reverse; padding: 12px; }
    #chat-messages-box { padding: 12px; min-height: 0; }
    .message-bubble { max-width: 95%; font-size: 16px; overflow-wrap: anywhere; }
    .chat-faq-side { width: 100%; padding: 16px; }
    .chat-faq-side p { font-size: 14px; }
    .downloads-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding: 0; }
    .downloads-scroll table { min-width: 560px; }
    #notifications-container { left: 12px !important; right: 12px; width: auto !important; max-width: 420px; }
    #spotlight-overlay, #crud-modal, #preview-modal { padding: 12px; height: 100dvh; }
    #spotlight-overlay { padding-top: max(12px, env(safe-area-inset-top)); }
    #spotlight-container, #crud-modal > .science-card, #preview-modal > .science-card { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
    #spotlight-container > .flex { padding: 12px; }
    #spotlight-results-box { max-height: calc(100dvh - 120px); overflow-y: auto; padding: 12px; }
    #spotlight-container button, .modal-close-btn { min-width: 44px; flex-shrink: 0; }
    #preview-modal-content img, #preview-modal-content iframe { max-width: 100%; }
    #preview-modal-content iframe { height: 65svh !important; }
    .microscope-box, .prep-sim-box { padding: 16px; }
    .controls-panel { min-width: 0; }
    #prep-step-content > * { min-width: 0; width: 100%; }
    #bottle-label-print { width: 100%; max-width: 320px; padding: 12px; overflow-wrap: anywhere; }
    #prep-step-content .flex { flex-wrap: wrap; }
}

@media screen and (max-width: 600px) {
    .science-card { padding: 16px; }
    .downloads-scroll { padding: 0; }
    #item-crud-form .grid { grid-template-columns: minmax(0, 1fr) !important; }
    .tab-pane > .flex > .flex { flex-wrap: wrap; width: 100%; }
    .text-3xl { font-size: 26px; }
    .text-2xl { font-size: 22px; }
    .text-xl { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .tab-pane, #spotlight-container, .ios-notification { animation: none; }
}