/* ============================================================================ SYLLOVO STUDIO — CROSS-TAB MOBILE & DESKTOP UX POLISH (studio-ux-polish.css) Surgical responsive containment, iOS auto-zoom prevention, WCAG Light/Dark contrast fixes, modal/popover viewport clamping, touch-friendly tables, and Desktop 390x844 iPhone Studio Preview frame parity (body.force-mobile-preview). ============================================================================ */ /* ---------------------------------------------------------------------------- 1. MISSING CSS CUSTOM PROPERTY ALIASES & THEME TOKENS (LIGHT + DARK) ---------------------------------------------------------------------------- */ :root { --primary: var(--brand-blue, #2563eb); --emerald-bg: var(--emerald-soft, rgba(5, 150, 105, 0.1)); --amber-bg: var(--amber-soft, rgba(217, 119, 6, 0.1)); --rose-bg: var(--rose-soft, rgba(225, 29, 72, 0.1)); --border-subtle: var(--border, #e4e4e7); --text-primary: var(--text-main, #09090b); --bg-elevated: var(--bg-surface, #ffffff); } [data-theme="dark"] { --primary: var(--brand-blue, #3b82f6); --emerald-bg: var(--emerald-soft, rgba(16, 185, 129, 0.14)); --amber-bg: var(--amber-soft, rgba(245, 158, 11, 0.14)); --rose-bg: var(--rose-soft, rgba(244, 63, 94, 0.14)); --border-subtle: var(--border, #27272a); --text-primary: var(--text-main, #fafafa); --bg-elevated: var(--bg-surface, #121215); } /* ---------------------------------------------------------------------------- 2. CRISP LIGHT / DARK MODE CONTRAST & DESKTOP OVERFLOW GUARD (WCAG AA+) ---------------------------------------------------------------------------- */ /* Downloads page .cmproj buttons had inline #c4b5fd (1.85:1 on white in Light mode) */ :root:not([data-theme="dark"]) a.btn[style*="c4b5fd"], :root:not([data-theme="dark"]) button.btn[style*="c4b5fd"], [data-theme="light"] a.btn[style*="c4b5fd"], [data-theme="light"] button.btn[style*="c4b5fd"] { color: #6d28d9 !important; border-color: rgba(109, 40, 217, 0.38) !important; background: rgba(109, 40, 217, 0.06) !important; } [data-theme="dark"] a.btn[style*="c4b5fd"], [data-theme="dark"] button.btn[style*="c4b5fd"] { color: #ddd6fe !important; border-color: rgba(167, 139, 250, 0.45) !important; background: rgba(139, 92, 246, 0.14) !important; } /* Profile popover buttons had hardcoded dark-mode pastel inline colors */ :root:not([data-theme="dark"]) #header-staff-logout-btn, [data-theme="light"] #header-staff-logout-btn { color: #be123c !important; border-color: rgba(190, 18, 60, 0.34) !important; background: rgba(225, 29, 72, 0.07) !important; } :root:not([data-theme="dark"]) #header-users-db-btn, [data-theme="light"] #header-users-db-btn { color: #1d4ed8 !important; border-color: rgba(29, 78, 216, 0.32) !important; background: rgba(37, 99, 235, 0.07) !important; } /* Amber & magenta inline action buttons in Light mode (#d97706 / #e80a89) */ :root:not([data-theme="dark"]) button.btn[style*="d97706"], :root:not([data-theme="dark"]) a.btn[style*="d97706"], [data-theme="light"] button.btn[style*="d97706"], [data-theme="light"] a.btn[style*="d97706"] { color: #92400e !important; border-color: rgba(180, 83, 9, 0.4) !important; } :root:not([data-theme="dark"]) button.btn[style*="e80a89"], :root:not([data-theme="dark"]) a.btn[style*="e80a89"], [data-theme="light"] button.btn[style*="e80a89"], [data-theme="light"] a.btn[style*="e80a89"] { color: #9d174d !important; } /* Header Popovers inherit .palette-swatch-popover (white-space: nowrap); allow wrapping */ #header-notif-popover, #user-profile-dropdown-popover { white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; box-sizing: border-box !important; } #header-notif-popover *, #user-profile-dropdown-popover * { max-width: 100%; box-sizing: border-box; } /* Prevent ultra-long pills on About / Docs / Settings from overflowing desktop cards */ #page-view-container .pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; } #page-view-container table .pill { white-space: nowrap; max-width: none; } /* Official HTML Outline card: allow horizontal scroll if wide nested tables appear on desktop */ .outline-table-card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; } /* ============================================================================ 3. MOBILE VIEWPORTS (<= 768px) — INPUTS, MODALS, TABLES, TOUCH TARGETS ============================================================================ */ @media (max-width: 768px) { /* 3A. Prevent iOS Safari Auto-Zoom on Focus (>= 16px on all text/select controls, using high specificity to beat #mobile-course-bar .course-select & .clip-owner-select) */ html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), html body select, html body textarea, html body .form-input, html body .course-select, html body #mobile-course-selector, html body .clip-owner-select, html body .role-select, html body #role-selector { font-size: 16px !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } html body select, html body .course-select { text-overflow: ellipsis; } /* 3B. Comfortable >= 36px Mobile Touch Targets on Action Buttons, Sub-Tabs & Close Buttons */ .top-header .btn, #mobile-theme-toggle-btn, #header-device-preview-toggle-btn, #header-notif-bell-btn, #header-theme-btn, #header-user-profile-btn, #page-view-container .btn, .modal-box .btn, .modal-box button, #header-notif-popover .btn, #user-profile-dropdown-popover .btn, .mobile-sheet-card .btn { min-height: 36px !important; } #mobile-theme-toggle-btn { height: 36px !important; } /* Keep compact header bar fitting cleanly within 360px while preserving 36px height */ .top-header { padding: 0 8px !important; gap: 4px !important; } .top-header .header-actions { gap: 4px !important; flex-shrink: 0; } .top-header .btn { padding-left: 7px !important; padding-right: 7px !important; } /* 3C. Cross-Tab Zero-Overflow Containment (Wrap Long Buttons, Pills, Code & URLs) */ html, body, .app-main, .workspace-scroll, #page-view-container { max-width: 100vw !important; } #page-view-container, #page-view-container .card, #page-view-container .card > div, #page-view-container section, #page-view-container article { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } /* Collapse wide inline multi-column grids (minmax(240px..400px, 1fr)) cleanly to 1 column */ #page-view-container [style*="minmax(240px"], #page-view-container [style*="minmax(250px"], #page-view-container [style*="minmax(260px"], #page-view-container [style*="minmax(280px"], #page-view-container [style*="minmax(300px"], #page-view-container [style*="minmax(310px"], #page-view-container [style*="minmax(320px"], #page-view-container [style*="minmax(340px"], #page-view-container [style*="minmax(360px"], #page-view-container [style*="repeat(3"], #page-view-container [style*="repeat(4"], #page-view-container [style*="1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; } /* Allow long button & pill labels outside scrolling data tables to wrap cleanly */ #page-view-container .btn, .modal-box .btn, #header-notif-popover .btn, #user-profile-dropdown-popover .btn, .mobile-sheet-card .btn { white-space: normal !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; line-height: 1.3 !important; padding-top: 6px !important; padding-bottom: 6px !important; overflow-wrap: anywhere; } .mobile-sheet-card [style*="grid-template-columns"], .mobile-sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #page-view-container .pill, .modal-box .pill { white-space: normal !important; max-width: 100% !important; height: auto !important; line-height: 1.35 !important; overflow-wrap: anywhere; } #page-view-container a:not(.btn), #page-view-container code, #page-view-container .card-title, #page-view-container .card-subtitle, .modal-box a:not(.btn), .modal-box code { overflow-wrap: anywhere !important; word-break: break-word !important; white-space: normal !important; } #page-view-container pre, .modal-box pre { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* Ensure flex toolbars & chart cards wrap instead of squeezing on 360px */ #page-view-container [style*="display:flex"], #page-view-container [style*="display: flex"] { min-width: 0 !important; max-width: 100% !important; } #page-view-container .card div[style*="gap:18px"], #page-view-container .card div[style*="gap: 18px"] { flex-wrap: wrap !important; } /* 3D. Wide Data Tables Across Downloads, Feedback, KB, Drive Vault, Confidence & Settings Keep Outline clip rows (tr.clip-row) as mobile cards, while restoring real horizontal touch-scrolling tables (with visible thead headers!) for all multi-column data tables. */ #page-view-container .card:has(> table.clean-table:not(:has(tr.clip-row))) { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; max-width: 100% !important; } table.clean-table:not(:has(tr.clip-row)) { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; border-collapse: collapse !important; } table.clean-table:not(:has(tr.clip-row)) > thead { display: table-header-group !important; } table.clean-table:not(:has(tr.clip-row)) > tbody { display: table-row-group !important; } table.clean-table:not(:has(tr.clip-row)) tr { display: table-row !important; padding: 0 !important; border-bottom: 1px solid var(--border) !important; } table.clean-table:not(:has(tr.clip-row)) th, table.clean-table:not(:has(tr.clip-row)) td { display: table-cell !important; padding: 8px 10px !important; vertical-align: middle !important; white-space: normal !important; min-width: 84px; } table.clean-table:not(:has(tr.clip-row)) th { white-space: nowrap !important; font-size: 11px !important; } table.clean-table:not(:has(tr.clip-row)) .btn, table.clean-table:not(:has(tr.clip-row)) .pill { white-space: nowrap !important; max-width: none !important; } /* Official HTML Outline View: stack label/value columns cleanly on 360px-390px screens, while letting nested clip tables scroll smoothly inside .outline-val-col */ .outline-table-card { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; max-width: 100% !important; } table.outline-html-table, table.outline-html-table > tbody { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } table.outline-html-table > tbody > tr { display: block !important; width: 100% !important; max-width: 100% !important; } table.outline-html-table > tbody > tr > td.outline-label-col { display: block !important; width: 100% !important; min-width: 0 !important; border-right: none !important; border-bottom: 1px dashed var(--border) !important; padding: 8px 12px 4px !important; font-size: 11.5px !important; } table.outline-html-table > tbody > tr > td.outline-val-col { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 6px 12px 10px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; box-sizing: border-box !important; } table.outline-html-table > tbody > tr.outline-section-banner-row > td { display: block !important; width: 100% !important; box-sizing: border-box !important; } table.outline-nested-table { min-width: 480px; } /* 3E. Modals, Drawers & Header Popovers — 100% Contained on 360px-390px Screens */ .modal-backdrop { padding: 8px !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } .modal-box, #new-course-modal-backdrop .modal-box, #registered-users-db-modal-box, #qr-modal-box, #course-copilot-drawer-box, #camtasia-roundtrip-modal-backdrop .modal-box { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; max-height: 88dvh !important; margin: 0 auto !important; padding: 14px !important; overflow-y: auto !important; overflow-x: hidden !important; border-radius: 14px !important; box-sizing: border-box !important; } #cmdk-modal-backdrop .modal-box { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; max-height: 86dvh !important; margin: 0 auto !important; padding: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; border-radius: 14px !important; box-sizing: border-box !important; } /* New Course Modal: single-column .grid-3 & wrapping footer actions */ #new-course-modal-backdrop .grid-3, #new-course-modal-backdrop .grid-2, #new-course-modal-backdrop [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; } #new-course-modal-backdrop .modal-box div[style*="display:flex"], #new-course-modal-backdrop .modal-box div[style*="display: flex"], #registered-users-db-modal-box div[style*="display:flex"], #registered-users-db-modal-box div[style*="display: flex"], #qr-modal-box div[style*="display:flex"], #qr-modal-box div[style*="display: flex"] { flex-wrap: wrap !important; min-width: 0 !important; max-width: 100% !important; } #new-course-modal-backdrop input[type="file"] { width: 100% !important; max-width: 100% !important; overflow: hidden !important; } /* Registered Users DB Modal: horizontal scroll inside table wrapper without widening modal */ #registered-users-db-modal-box div[style*="overflow-x:auto"], #registered-users-db-modal-box div[style*="overflow-x: auto"] { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } #registered-users-db-modal-box table { display: table !important; width: max-content !important; min-width: 100% !important; } #registered-users-db-modal-box thead { display: table-header-group !important; } #registered-users-db-modal-box tbody { display: table-row-group !important; } #registered-users-db-modal-box tr { display: table-row !important; } #registered-users-db-modal-box th, #registered-users-db-modal-box td { display: table-cell !important; white-space: nowrap !important; padding: 8px 10px !important; } /* Header Notification & User Profile Popovers: override inline 400px width & prevent left/right clipping */ #header-notif-popover, #user-profile-dropdown-popover { position: fixed !important; top: 54px !important; left: 8px !important; right: 8px !important; width: auto !important; max-width: calc(100vw - 16px) !important; max-height: min(82dvh, calc(100dvh - 66px)) !important; overflow-y: auto !important; overflow-x: hidden !important; margin: 0 !important; z-index: 2600 !important; } /* Slide-Over Side Drawers (Module Submit & Course Depth): full-width safe-area sheet */ #page-view-container aside[style*="position:fixed"] { width: 100vw !important; max-width: 100vw !important; left: 0 !important; right: 0 !important; padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; box-sizing: border-box !important; z-index: 2200 !important; } } /* ============================================================================ 4. DESKTOP 390x844 iPHONE STUDIO PREVIEW SHELL (body.force-mobile-preview) Ensures clicking "📱 Mobile" on desktop (> 768px) renders a crisp centered 390x844 frame with mobile bottom nav, More sheet, modals, popovers, tables, touch targets, and 16px inputs behaving identically to a real iPhone 14 Pro. ============================================================================ */ @media (min-width: 769px) { html:has(body.force-mobile-preview) { background: #0b0c10 !important; } body.force-mobile-preview { background: radial-gradient(circle at 50% 0%, #1f2333 0%, #090a0f 72%) !important; overflow: hidden !important; } body.force-mobile-preview #app-layout-root { width: 390px !important; max-width: 390px !important; height: min(844px, calc(100dvh - 28px)) !important; min-height: 0 !important; margin: 14px auto !important; border-radius: 32px !important; border: 6px solid #232634 !important; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.68), 0 0 0 1px rgba(255, 255, 255, 0.12) !important; overflow: hidden !important; position: relative !important; background: var(--bg-app, #ffffff) !important; display: flex !important; flex-direction: column !important; } /* Pixel-perfect bottom nav flush with the inner bottom bezel on any monitor height */ body.force-mobile-preview .mobile-bottom-nav { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; position: fixed !important; top: calc(14px + min(844px, calc(100dvh - 28px)) - 66px) !important; bottom: auto !important; left: 50% !important; transform: translateX(-50%) !important; width: 378px !important; height: 60px !important; padding: 4px 4px 6px !important; z-index: 1500 !important; border-radius: 0 0 26px 26px !important; background: var(--bg-surface, #ffffff) !important; border-top: 1px solid var(--border, #e4e4e7) !important; box-sizing: border-box !important; } body.force-mobile-preview .mobile-nav-btn { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; background: transparent !important; border: none !important; color: var(--text-muted) !important; font-size: 10px !important; font-weight: 600 !important; cursor: pointer !important; border-radius: 8px !important; padding: 2px !important; } body.force-mobile-preview .mobile-nav-btn.active { color: var(--brand-blue) !important; background: var(--brand-blue-soft) !important; } body.force-mobile-preview .mobile-nav-btn .m-icon { font-size: 15px !important; line-height: 1 !important; } /* Mobile "More" bottom sheet (.mobile-sheet-card) inside the 390x844 frame */ body.force-mobile-preview #mobile-menu-sheet.open { display: flex !important; align-items: flex-end !important; justify-content: center !important; position: fixed !important; top: 20px !important; left: 50% !important; transform: translateX(-50%) !important; width: 378px !important; height: calc(min(844px, calc(100dvh - 28px)) - 12px) !important; border-radius: 26px !important; background: rgba(9, 9, 11, 0.56) !important; z-index: 2100 !important; overflow: hidden !important; } body.force-mobile-preview .mobile-sheet-card { width: 100% !important; max-height: 84% !important; overflow-y: auto !important; background: var(--bg-surface, #ffffff) !important; border-top: 1px solid var(--border, #e4e4e7) !important; border-radius: 18px 18px 26px 26px !important; padding: 14px !important; box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35) !important; box-sizing: border-box !important; } /* Keep AI FAB anchored cleanly inside the right bezel of the 390px phone frame */ body.force-mobile-preview #syllovo-ai-fab { position: fixed !important; left: auto !important; right: calc(50% - 195px + 14px) !important; bottom: auto !important; top: calc(14px + min(844px, calc(100dvh - 28px)) - 118px) !important; z-index: 1550 !important; } /* Prevent 16px auto-zoom discrepancy & constrain wide desktop