/* ═══════���═══════════════════════════���══════════════════════════════════════ SOL RESPONSIVE — Global mobile-responsive CSS for all Spear of Life pages Injected into of every HTML file. Works alongside the Lion injector (which only covers fleet instruments). This file handles: • Planck bar / SOL bar / completion bar (shared by all gated pages) • Common structural rules (tables, images, inputs, grids) • React page common patterns (flex layouts, sticky headers) ═════════════════���════════════════════════════════���═══════════════════════ */ /* ── 768px BREAKPOINT ──���───────────────────���──────────────────────────── */ @media (max-width: 768px) { /* ── GLOBAL STRUCTURAL ── */ html, body { overflow-x: hidden !important; } img { max-width: 100% !important; height: auto !important; } pre, code { white-space: pre-wrap !important; word-wrap: break-word !important; } input, textarea, select { max-width: 100% !important; box-sizing: border-box !important; } table { max-width: 100% !important; } iframe { max-width: 100% !important; } /* ── WRAP CONTAINERS (all instrument prefixes) ── */ [id$="-wrap"] { min-width: 0 !important; width: 100% !important; margin: 0 auto !important; } /* ── PLANCK BAR ── */ #planck-bar { flex-wrap: wrap !important; padding: 4px 8px !important; gap: 2px 8px !important; } #planck-bar .title { font-size: 8pt !important; } #prod-bar { font-size: 6.5pt !important; flex-wrap: wrap !important; gap: 2px 6px !important; margin-left: 0 !important; width: 100% !important; justify-content: center !important; } /* ── SOL BAR ── */ #sol-bar { flex-wrap: wrap !important; padding: 3px 8px !important; gap: 2px !important; } #sol-bar .sol-left { min-width: auto !important; flex: 0 0 auto !important; } #sol-bar .sol-center { font-size: 8px !important; letter-spacing: 1px !important; white-space: normal !important; order: 3 !important; width: 100% !important; text-align: center !important; padding: 2px 0 !important; } #sol-bar .sol-right { min-width: auto !important; flex: 0 0 auto !important; } #sol-input { width: 100px !important; font-size: 8px !important; } #sol-toggle { padding: 3px 8px !important; } /* ── COMPLETION BAR ── */ #completion-bar { flex-wrap: wrap !important; gap: 4px !important; padding: 4px 8px !important; font-size: 6.5pt !important; } /* ── ZOOM CONTROL ── */ #zoom-ctrl { bottom: 4px !important; right: 4px !important; padding: 1px 4px !important; } #zoom-ctrl button { padding: 1px 6px !important; font-size: 9pt !important; } /* ── TABLES — horizontal scroll ── */ table:not([style*="border-collapse"]) { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } /* Tables that ARE styled for collapse — keep table display but allow scroll via parent */ .grid-table, #dream-table, .te-table, .sh-grid { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } /* ── COMMON FLEX PATTERNS — prevent overflow ── */ [style*="display: flex"], [style*="display:flex"] { flex-wrap: wrap !important; } /* ── TITLE BLOCKS ── */ [class$="-title-main"], [class*="-title-main"] { font-size: 11pt !important; } [class$="-title-sub"], [class*="-title-sub"] { font-size: 7pt !important; } [class$="-pillars"], [class*="-pillars"] { flex-wrap: wrap !important; } [class$="-pill"], [class*="-pill"] { font-size: 6pt !important; padding: 2px 3px !important; } /* ── SECTION HEADERS ── */ [class$="-section"], [class*="-section"] { font-size: 7.5pt !important; padding: 5px 8px !important; line-height: 1.4 !important; } /* ── AREA ROWS ��─ */ [class$="-area-row"], [class*="-area-row"] { min-height: 60px !important; } .wk-num, .pm-num, .sp-num, .av-num, .dg-num { width: 22px !important; font-size: 6pt !important; } /* ── TEXTAREAS ── */ [class$="-textarea"], [class*="-textarea"] { font-size: 8pt !important; min-height: 50px !important; padding: 5px 8px !important; } /* ── FOOTERS ── */ [class$="-footer"], [class*="-footer"] { flex-wrap: wrap !important; gap: 4px !important; font-size: 7pt !important; padding: 4px 8px !important; } /* ── AVATAR PROFILE ── */ .av-row, .av-open-row { flex-wrap: wrap !important; } .av-label { min-width: 80px !important; width: auto !important; font-size: 7pt !important; } /* ── DIAGNOSTICS ── */ .dg-row, .dg-hdr-row { flex-wrap: wrap !important; } /* ── OBSERVER BOARDS ── */ .board-grid, .board-row { flex-wrap: wrap !important; } .board-cell { min-width: 0 !important; } /* ── SIDEBAR NAV (if present) ���─ */ /* Sidebar content areas that are INLINE (not hamburger-toggled overlays) get reflowed into the mobile layout. Hamburger sidebars (#sidebar from antleo.html, #sidebar-nav from sidebar-nav.js) use off-screen hiding (left:-300px / translateX) and must NOT be overridden here. */ .sidebar-inline { position: relative !important; width: 100% !important; height: auto !important; } #main-content, .main-content { margin-left: 0 !important; width: 100% !important; } /* ── N1 SPHERE PAGES ── */ .sphere-grid { grid-template-columns: 1fr !important; } .sphere-card { min-width: 0 !important; } /* ── ADMIN TABLES ── */ .admin-table { display: block !important; overflow-x: auto !important; } .admin-row { flex-wrap: wrap !important; } /* ── HIRING / CAREERS ── */ .job-grid { grid-template-columns: 1fr !important; } .apply-form { max-width: 100% !important; padding: 0 8px !important; } } /* ── 480px BREAKPOINT ─────────────────────────────────────────────────── */ @media (max-width: 480px) { #planck-bar .title { font-size: 7pt !important; } #prod-bar { font-size: 5.5pt !important; } #sol-bar .sol-center { font-size: 7px !important; } [class$="-title-main"], [class*="-title-main"] { font-size: 10pt !important; } [class$="-textarea"], [class*="-textarea"] { font-size: 7.5pt !important; } [class$="-section"], [class*="-section"] { font-size: 7pt !important; } .grid-table td, .grid-table th { font-size: 6.5pt !important; padding: 2px 3px !important; } } /* ═════════════════════════════════════════════════════════════════════════ HIERARCHY ALIGNMENT PAGES — L0 / L1 / L2 Responsive Overrides These pages use React + Babel CDN with heavy inline styles. className props on key elements + !important in @media queries override the inline styles at each breakpoint. ═════════════════════════════════════════════════════════════════════════ */ /* ── 768px — L0 PAGES (cosmic-god-theos, gods-eagle, gods-lion, gods-ox, gods-wise-heart) ── */ @media (max-width: 768px) { /* Main wrapper — fluid, no fixed maxWidth */ .l0-wrap { max-width: 100% !important; padding: 4px !important; } /* Table scroll wrapper — horizontal scroll for wide tables */ .l0-tbl-scroll { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } /* Tables — fluid */ .l0-tbl { table-layout: auto !important; width: 100% !important; min-width: 600px !important; } /* Colgroup columns — make fluid at tablet */ .l0-col-num { width: 30px !important; } .l0-col-label { width: 90px !important; } .l0-col-q { width: 55px !important; } /* Title bar text wrapping */ .l0-title-cell { white-space: normal !important; word-break: break-word !important; font-size: 11px !important; padding: 6px 4px !important; letter-spacing: 0.5px !important; } /* Metadata bar — wrap */ .l0-meta-cell { white-space: normal !important; word-break: break-word !important; font-size: 8px !important; line-height: 1.5 !important; } /* Operator row — stack on narrow */ .l0-op-row td { font-size: 9px !important; padding: 3px 4px !important; } /* Stats bar — wrap */ .l0-stats-cell { white-space: normal !important; word-break: break-word !important; line-height: 1.6 !important; } .l0-stats-cell span { display: inline !important; } /* Section headers */ .l0-section-hdr { font-size: 10px !important; white-space: normal !important; word-break: break-word !important; } /* Spec text cells */ .l0-spec-cell { font-size: 9px !important; line-height: 1.4 !important; } /* Q columns — smaller text */ .l0-q-cell { font-size: 8px !important; padding: 2px 3px !important; } } /* ── 480px — L0 PAGES ── */ @media (max-width: 480px) { .l0-tbl { min-width: 500px !important; } .l0-col-num { width: 24px !important; } .l0-col-label { width: 70px !important; } .l0-col-q { width: 45px !important; } .l0-title-cell { font-size: 10px !important; } .l0-meta-cell { font-size: 7px !important; } .l0-section-hdr { font-size: 9px !important; } .l0-spec-cell { font-size: 8px !important; } .l0-q-cell { font-size: 7px !important; padding: 2px !important; } .l0-op-row td { font-size: 8px !important; } } /* ── 768px — L1 PAGES (calebs-eagle, calebs-lion, calebs-ox, calebs-sovereign, calebs-wise-heart) ── */ @media (max-width: 768px) { /* Main wrapper — fluid */ .l1-wrap { min-height: auto !important; } /* Top bar — stack */ .l1-topbar { flex-wrap: wrap !important; gap: 4px !important; padding: 4px 8px !important; position: relative !important; top: auto !important; } .l1-topbar-left { font-size: 9px !important; } .l1-topbar-left span { font-size: 7px !important; } .l1-topbar-right { font-size: 8px !important; width: 100% !important; text-align: center !important; } /* Stats bar — wrap */ .l1-statsbar { flex-wrap: wrap !important; gap: 6px 12px !important; font-size: 8px !important; justify-content: center !important; } /* Grid rows — switch to fluid scroll wrapper */ .l1-grid-scroll { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } /* All grid rows — set min-width so they scroll rather than squish */ .l1-grid-row { min-width: 700px !important; } /* Column headers — sticky off at tablet */ .l1-col-hdrs { position: relative !important; top: auto !important; } /* Section headers — wrap text */ .l1-section-hdr { white-space: normal !important; word-break: break-word !important; font-size: 10px !important; } /* Description cells */ .l1-desc-cell { font-size: 8px !important; line-height: 1.4 !important; } /* Bottom tab bar */ .l1-tabbar { position: relative !important; bottom: auto !important; flex-wrap: wrap !important; gap: 4px !important; padding: 4px 6px !important; } .l1-tabbar button { font-size: 8px !important; padding: 4px 8px !important; } .l1-tabbar-legend { font-size: 7px !important; flex-wrap: wrap !important; } /* Review textareas */ .l1-review-ta { min-height: 40px !important; font-size: 8px !important; } /* Title rows */ .l1-title-row { font-size: 12px !important; white-space: normal !important; word-break: break-word !important; } .l1-subtitle-row { font-size: 8px !important; white-space: normal !important; } /* Observation layer */ .l1-obs-cell { font-size: 7px !important; white-space: normal !important; word-break: break-word !important; line-height: 1.5 !important; } } /* ── 480px — L1 PAGES ── */ @media (max-width: 480px) { .l1-grid-row { min-width: 580px !important; } .l1-topbar-left { font-size: 8px !important; } .l1-topbar-left span { font-size: 6px !important; } .l1-statsbar { font-size: 7px !important; gap: 4px 8px !important; } .l1-section-hdr { font-size: 9px !important; } .l1-desc-cell { font-size: 7px !important; } .l1-title-row { font-size: 10px !important; } .l1-col-hdrs { font-size: 7px !important; } } /* ── 768px — L2 PAGES (eagle-ai-prime, lion-ai-prime, ox-ai-prime, wise-heart-ai-prime, silicon-caleb-B27) ── */ @media (max-width: 768px) { /* Main wrapper — fluid */ .l2-wrap { max-width: 100% !important; padding: 4px !important; } /* Table scroll wrapper */ .l2-tbl-scroll { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } /* Tables — fluid with min-width for scrollability */ .l2-tbl { table-layout: auto !important; width: 100% !important; min-width: 600px !important; } /* Column sizing */ .l2-col-num { width: 30px !important; } .l2-col-label { width: 90px !important; } .l2-col-q { width: 55px !important; } /* Title bar */ .l2-title-cell { white-space: normal !important; word-break: break-word !important; font-size: 11px !important; padding: 6px 4px !important; letter-spacing: 0.5px !important; } /* Substrate/metadata bar */ .l2-meta-cell { white-space: normal !important; word-break: break-word !important; font-size: 8px !important; line-height: 1.5 !important; } /* Operator row */ .l2-op-row td { font-size: 9px !important; padding: 3px 4px !important; } /* Stats bar */ .l2-stats-cell { white-space: normal !important; word-break: break-word !important; line-height: 1.6 !important; } /* Section headers */ .l2-section-hdr { font-size: 10px !important; white-space: normal !important; word-break: break-word !important; } /* Spec text */ .l2-spec-cell { font-size: 9px !important; line-height: 1.4 !important; } /* Q toggle cells */ .l2-q-cell { font-size: 8px !important; padding: 2px 3px !important; } /* Review textareas */ .l2-review-ta { width: 100% !important; min-height: 40px !important; font-size: 9px !important; } /* Footer / legend bar */ .l2-legend { white-space: normal !important; word-break: break-word !important; font-size: 7px !important; line-height: 1.5 !important; } } /* ── 480px — L2 PAGES ── */ @media (max-width: 480px) { .l2-tbl { min-width: 500px !important; } .l2-col-num { width: 24px !important; } .l2-col-label { width: 70px !important; } .l2-col-q { width: 45px !important; } .l2-title-cell { font-size: 10px !important; } .l2-meta-cell { font-size: 7px !important; } .l2-section-hdr { font-size: 9px !important; } .l2-spec-cell { font-size: 8px !important; } .l2-q-cell { font-size: 7px !important; padding: 2px !important; } .l2-op-row td { font-size: 8px !important; } .l2-review-ta { font-size: 8px !important; } }