/* ═══════════════════════════════════════════════════════════════════════════ PRISM — Responsive Layer ═══════════════════════════════════════════════════════════════════════════ Mobile-first responsive overrides. Layered ON TOP of existing desktop CSS. Does NOT rewrite existing rules — adds breakpoint-specific adjustments. Breakpoints: Mobile: 0 – 767px Tablet: 768 – 1023px Desktop: 1024px+ (existing styles, mostly untouched) Large Desktop: 1440px+ Load order: AFTER all other stylesheets (last in ). ═══════════════════════════════════════════════════════════════════════════ */ /* ── Responsive utility variables ──────────────────────────────────────────── */ :root { --panel-transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1); --touch-min: 44px; --mobile-header-h: 48px; --sheet-radius: 16px; } /* Hidden by default; enabled only on mobile */ .an-mobile-mode-btn, .an-mobile-mode-menu, .an-mobile-mode-label { display: none; } /* ═══════════════════════════════════════════════════════════════════════════ MOBILE — 0 to 767px ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* ── Body / Root ──────────────────────────────────────────────────────── */ :root { --topbar-height: 48px; --header-height: 0px; --wab-height: 48px; --footer-height: 0px; --footer-gap: 0px; } :root:has(.an-toolbar) { --topbar-height: 48px; --header-height: 0px; } body { overflow-x: hidden; -webkit-text-size-adjust: 100%; } /* ── Toolbar / Navbar ─────────────────────────────────────────────────── */ .an-toolbar { height: 48px; min-height: 48px; padding: 0 8px; gap: 4px; } .an-tl-left { flex-shrink: 0; display: flex; align-items: center; gap: 8px; } .an-tl-brand-text { display: none; /* Hide "PRISM / Design Canvas" text on mobile */ } .an-tl-logo { width: 42px; height: 42px; } /* Mode switcher tabs hidden, center is empty spacer */ .an-tl-center { display: flex; flex: 1; min-width: 0; } .an-tl-center .an-tabs { display: none; } .an-tl-center::-webkit-scrollbar { display: none; } /* Mode label sits next to logo in the left section */ .an-mobile-mode-label { display: block; font-size: 18px; font-weight: 600; color: #f1f5f9; text-transform: capitalize; letter-spacing: 0.01em; } .an-mobile-mode-menu { position: fixed; top: calc(var(--topbar-height) + 6px); right: 10px; width: min(230px, 70vw); display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 12px; background: #0f1d3b; border: 1px solid rgba(148, 163, 184, 0.25); box-shadow: 0 12px 30px rgba(2, 6, 23, 0.45); z-index: 1300; } .an-mobile-mode-menu[hidden] { display: none !important; } .an-mobile-mode-item { display: flex; align-items: center; width: 100%; min-height: 38px; border: none; border-radius: 8px; background: transparent; color: #dbeafe; font-size: 13px; font-weight: 600; padding: 0 10px; text-align: left; } .an-mobile-mode-item.an-mobile-has-sub { justify-content: space-between; } .an-mobile-chevron { transition: transform 0.2s ease; opacity: 0.6; } .an-mobile-has-sub.expanded .an-mobile-chevron { transform: rotate(90deg); opacity: 1; } .an-mobile-mode-item:active, .an-mobile-mode-item:hover { background: rgba(79, 110, 247, 0.22); } /* Sub-menu items (nested under Practice / Evaluate) */ .an-mobile-sub-menu { display: flex; flex-direction: column; gap: 1px; padding-left: 14px; margin-bottom: 2px; } .an-mobile-sub-menu[hidden] { display: none; } .an-mobile-sub-item { display: flex; align-items: center; width: 100%; min-height: 36px; border: none; border-radius: 6px; background: rgba(79, 110, 247, 0.08); color: #93c5fd; font-size: 12px; font-weight: 500; padding: 0 12px; text-align: left; text-decoration: none; cursor: pointer; } .an-mobile-sub-item:active, .an-mobile-sub-item:hover { background: rgba(79, 110, 247, 0.22); color: #fff; } .an-tabs { flex-wrap: nowrap; gap: 2px; padding: 0 4px; } .an-tab { font-size: 11px; padding: 6px 8px; white-space: nowrap; min-height: 36px; display: flex; align-items: center; } /* Right section — even spacing between icons */ .an-tl-right { gap: 8px; flex-shrink: 0; align-items: center; } .an-tl-vsep { display: none; } .an-mobile-mode-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 32px; height: 32px; border: 1px solid rgba(148, 163, 184, 0.32); background: rgba(148, 163, 184, 0.08); border-radius: 8px; padding: 0 7px; color: #fff; } .an-mobile-mode-btn span { display: block; width: 100%; height: 2px; border-radius: 999px; background: currentColor; } .an-streak-chip { width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; } .an-streak-count { display: none; } .an-feedback-btn { display: none; } /* Feedback accessible via profile menu on mobile */ .notif-bell-btn, .an-tl-icon-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } /* Auth buttons compact */ #auth-signin-button, #auth-signup-button { font-size: 11px; padding: 6px 10px; min-height: 36px; } /* ── Workspace Action Bar ─────────────────────────────────────────────── */ #workspace-action-bar { height: 48px; padding: 0 8px; gap: 6px; } .wab-center { flex: 1; min-width: 0; } .wab-question-selector { max-width: 100%; position: static; /* prevent stacking context from clipping dropdown */ } .pcs-trigger { font-size: 11px; padding: 6px 10px; max-width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Preset dropdown — full-width bottom-sheet style on mobile */ .wab-question-selector .pcs-list, .preset-custom-select.open .pcs-list { position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; min-width: 100% !important; max-height: 55vh; border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; z-index: 1300; overflow-y: auto; transform: none !important; padding-bottom: max(12px, env(safe-area-inset-bottom)); } .wab-right { gap: 4px; flex-shrink: 0; } /* Run button: icon-only on mobile */ #wab-run-btn { width: 38px; height: 38px; min-width: 38px; padding: 0; border-radius: 50%; justify-content: center; align-items: center; } #wab-run-btn span { display: none !important; } #wab-run-btn .wab-btn-icon { margin: 0; } /* Hide submit button — actions live in dropdown */ #wab-submit-btn { display: none !important; } .wab-stopwatch { display: none; } /* ── Layout — Panels as overlays on mobile ───────────────────────────── */ .layout { display: grid; grid-template-columns: 1fr !important; grid-template-rows: 1fr; gap: 0; padding: 0; height: calc(var(--vh, 100vh) - var(--topbar-height) - var(--wab-height)) !important; max-height: calc(var(--vh, 100vh) - var(--topbar-height) - var(--wab-height)) !important; contain: none; /* Remove contain so fixed children work */ overflow: hidden; } .layout.left-collapsed, .layout.right-collapsed, .layout.left-collapsed.right-collapsed { grid-template-columns: 1fr; } /* ── Left Panel — Slide-over from left ───────────────────────────────── */ #left-panel { position: fixed; top: calc(var(--topbar-height) + var(--wab-height)); left: 0; bottom: 0; width: min(280px, 80vw); z-index: 1000; transform: translateX(-100%); transition: transform var(--panel-transition); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; padding-bottom: 24px; /* Breathing room at bottom */ } #left-panel .panel-header { padding: 0 12px; height: 48px; min-height: 48px; position: sticky; top: 0; background: #fff; z-index: 2; border-bottom: 1px solid rgba(226, 232, 240, 0.9); } #left-panel .components-section, #left-panel .inspector-section { padding: 12px; } #left-panel.mobile-open { transform: translateX(0); } /* Left panel toggle — float button when panel is closed */ .floating-toggle.left { display: flex !important; position: fixed; top: 50%; left: 12px; z-index: 999; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); align-items: center; justify-content: center; border: 1px solid #e2e8f0; font-size: 14px; transform: translateY(-50%); } /* ── Right Panel — Bottom sheet on mobile ─────────────────────────────── */ #right-panel { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: 60vh; max-height: 60vh; z-index: 1000; transform: translateY(100%); transition: transform var(--panel-transition); border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12); overflow: hidden; background: #fff; width: 100%; } /* Drag handle indicator for bottom sheet */ #right-panel::before { content: ''; display: block; width: 36px; height: 4px; background: #cbd5e1; border-radius: 2px; margin: 8px auto 4px; flex-shrink: 0; } #right-panel .panel-header { padding: 0 12px; height: 44px; min-height: 44px; } /* Right panel scrollable body */ #right-panel .panel-view, #right-panel .output, #right-panel #practice-content, #right-panel #simulation-content { padding: 12px; overflow-y: auto; -webkit-overflow-scrolling: touch; } #right-panel.mobile-open { transform: translateY(0); } /* Right panel toggle — float button */ .floating-toggle.right { display: flex !important; position: fixed; top: 50%; right: 12px; z-index: 999; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); align-items: center; justify-content: center; border: 1px solid #e2e8f0; font-size: 14px; transform: translateY(-50%); } /* ── Panel overlay backdrop ──────────────────────────────────────────── */ .mobile-panel-backdrop { position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .mobile-panel-backdrop.visible { opacity: 1; pointer-events: auto; } /* Hide floating toggles when respective panel is open */ #left-panel.mobile-open ~ .floating-toggle.left, body:has(#left-panel.mobile-open) .floating-toggle.left { opacity: 0; pointer-events: none; } #right-panel.mobile-open ~ .floating-toggle.right, body:has(#right-panel.mobile-open) .floating-toggle.right { opacity: 0; pointer-events: none; } /* ── Canvas — Full width ─────────────────────────────────────────────── */ .canvas-wrapper { grid-column: 1; grid-row: 1; width: 100%; height: 100%; overflow: hidden; touch-action: none; /* Enable custom touch handling */ border-radius: 0; box-shadow: none; } .canvas { width: 100%; height: 100%; position: relative; } /* Canvas nodes — preserve exact sizing, prevent distortion */ .canvas .node { min-height: unset; min-width: unset; } .canvas .node img, .canvas .node svg, .canvas .node-icon img, .canvas .node-icon svg { max-width: none; width: auto; height: auto; } .canvas .node-close { min-height: unset; min-width: unset; } .canvas .node-port { min-height: unset; min-width: unset; } /* Canvas toolbar — compact bottom bar */ .canvas-float-toolbar { position: fixed !important; top: auto !important; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 200; padding: 6px 10px; gap: 3px; border-radius: 14px; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18); background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(10px); } .cfb-btn { width: 32px; height: 32px; min-width: 32px; min-height: 32px; } .cfb-zoom-label { font-size: 10px; min-width: 32px; min-height: unset; } .cfb-sep { width: 1px; margin: 0 2px; } /* Canvas reset button */ .canvas-reset { position: fixed !important; top: auto !important; bottom: 60px; right: 12px; width: 40px; height: 40px; z-index: 200; border-radius: 50%; } /* Canvas action dock (Practice) */ #canvas-action-dock { bottom: 52px; left: 50%; transform: translateX(-50%); padding: 6px 12px; gap: 8px; } /* ── Dropdowns / Menus — Position for mobile ─────────────────────────── */ .li-eval-dropdown-menu { position: fixed; top: auto; bottom: 0; left: 0; right: 0; border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; min-width: 100%; max-height: 50vh; overflow-y: auto; padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); z-index: 1300; } .li-eval-dropdown-item { padding: 14px 16px; min-height: var(--touch-min); } /* ── Modals — Fullscreen on mobile ───────────────────────────────────── */ .modal .modal-content, .eval-modal-card, .feedback-modal-card { width: 100% !important; max-width: 100% !important; height: 100vh; max-height: 100vh; border-radius: 0; margin: 0; } /* Or bottom-sheet style for smaller modals */ .modal .modal-content.open-modal { height: auto; max-height: 85vh; border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; position: fixed; bottom: 0; left: 0; right: 0; top: auto; } /* ── Forms — Full width ──────────────────────────────────────────────── */ input, textarea, select { font-size: 16px !important; /* Prevents iOS zoom on focus */ } .modal-form label { font-size: 13px; } .modal-actions { flex-direction: column; gap: 8px; } .modal-actions .button { width: 100%; min-height: var(--touch-min); } /* ── Components palette — 3 columns on mobile ────────────────────────── */ .palette { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px; } .palette-item { min-height: var(--touch-min); padding: 6px; } /* ── Inspector — compact ─────────────────────────────────────────────── */ .inspector-section { padding: 8px; } /* ── Profile dropdown ────────────────────────────────────────────────── */ .an-profile-dropdown { position: fixed; top: var(--topbar-height); right: 0; width: min(300px, 85vw); max-height: calc(100vh - var(--topbar-height)); border-radius: 0 0 0 12px; } /* ── Notification dropdown ───────────────────────────────────────────── */ .notif-dropdown { position: fixed; top: var(--topbar-height); left: 0; right: 0; width: 100%; max-height: 60vh; border-radius: 0 0 12px 12px; } /* Hide panel toggles while evaluate selection screen is open */ body.evaluation-mode .floating-toggle, body:has(#evaluate-selection-screen:not(.hidden)) .floating-toggle { display: none !important; } /* Mobile WAB action dropdown (single trigger button) */ .wab-right { position: relative; } .wab-mobile-actions { position: absolute; right: 0; bottom: calc(100% + 8px); display: flex; flex-direction: column; gap: 6px; min-width: 180px; padding: 8px; border-radius: 10px; border: 1px solid rgba(148, 163, 184, 0.28); background: #0f1d3b; box-shadow: 0 12px 26px rgba(2, 6, 23, 0.45); z-index: 1300; } .wab-mobile-actions[hidden] { display: none !important; } .wab-mobile-action-item { height: 36px; border: none; border-radius: 8px; background: rgba(79, 110, 247, 0.2); color: #e2e8f0; font-size: 12px; font-weight: 600; text-align: left; padding: 0 10px; } /* ══════════════════════════════════════════════════════════════════════ ROADMAP VIEW — Single column, panels stacked ══════════════════════════════════════════════════════════════════════ */ #roadmap-view { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr; top: var(--topbar-height); bottom: 0; } #rp-left { position: fixed; top: var(--topbar-height); left: 0; bottom: 0; width: min(280px, 80vw); z-index: 1100; transform: translateX(-100%); transition: transform var(--panel-transition); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15); } #rp-left.mobile-open { transform: translateX(0); } #rp-right { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: 55vh; z-index: 1100; transform: translateY(100%); transition: transform var(--panel-transition); border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12); background: #fff; } #rp-right.mobile-open { transform: translateY(0); } /* Roadmap main area — full width */ #rp-main { grid-column: 1; grid-row: 1 / -1; overflow-y: auto; padding: 12px; } /* Topic items — tighter padding */ .rm-topic-item { padding: 10px 12px; min-height: var(--touch-min); } .rm-filter-option { min-height: var(--touch-min); padding: 8px 12px; } /* ══════════════════════════════════════════════════════════════════════ ROADMAP MAIN PAGE — Vertical layout on mobile ══════════════════════════════════════════════════════════════════════ */ body.roadmap-main-mode { height: auto !important; max-height: none !important; overflow: auto !important; overflow-x: hidden !important; } #rm-main { height: auto; overflow: visible; } #rm-hero { padding: 12px 16px 8px; } .rm-hero-title { font-size: clamp(1.1rem, 5vw, 1.5rem); } .rm-hero-stats { flex-wrap: wrap; gap: 8px; justify-content: center; } .rm-hero-stat { padding: 0 12px; } /* Journey canvas — vertical on mobile */ #rm-journey-canvas { flex: none; min-height: auto; overflow: visible; padding: 16px 12px; } #rm-road-wrap { height: auto; display: flex; flex-direction: column; gap: 24px; align-items: center; } /* Hide the horizontal SVG road on mobile */ #rm-road-svg { display: none; } /* Road caps — reposition for vertical layout */ .rm-road-cap { position: static; transform: none; margin: 0 auto; } .rm-road-cap-start { margin-bottom: 8px; } .rm-road-cap-end { margin-top: 8px; } /* Today's goal — inline, full-width (prevents overlap with hero/cards) */ #rm-today-goal { position: static; top: auto; right: auto; width: 100%; margin: 0 0 12px; padding: 0 4px; } /* Milestones container — no absolute overlay on mobile */ #rm-milestones { position: static; inset: auto; width: 100%; display: flex; flex-direction: column; gap: 14px; pointer-events: auto; } /* Phase cards — stack vertically */ .rm-milestone { position: static !important; transform: none !important; top: auto !important; left: auto !important; right: auto !important; width: 100% !important; max-width: 100%; margin-bottom: 0; opacity: 1; } .rm-milestone.rm-ms-top, .rm-milestone.rm-ms-bottom, .rm-milestone.rm-ms-visible { transform: none !important; } /* No connector lines needed in stacked layout */ .rm-milestone-connector { display: none; } /* Hide absolute checkpoint rings in vertical mode to prevent overlap */ .rm-node-ring { display: none !important; } /* Today's Goal banner */ .rmg-inner, .rm-goal-card { max-width: 100%; } /* ══════════════════════════════════════════════════════════════════════ LEARN MODE — Narration, stage picker, theory panel ══════════════════════════════════════════════════════════════════════ */ #lm-narration { left: 8px; right: 8px; transform: translateX(0) translateY(10px); max-width: calc(100vw - 16px); bottom: 60px; font-size: 12px; padding: 8px 14px; } #lm-narration.lm-narration-show { transform: translateX(0) translateY(0); } body.mode-learn .learn-stage-picker { padding: 10px 12px; gap: 6px; } body.mode-learn .learn-question-item { padding: 10px 12px; min-height: var(--touch-min); } /* Stage theory panel scrollable */ body.mode-learn .stage-theory { max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* LRP sim footer — full width buttons */ .lrp-sim-footer { padding: 8px 12px; flex-direction: column; gap: 6px; } .lrp-sim-footer .button { width: 100%; min-height: var(--touch-min); } /* ══════════════════════════════════════════════════════════════════════ EVALUATE / INTERVIEW MODE ══════════════════════════════════════════════════════════════════════ */ #im-toolbar { height: 52px; min-height: 52px; padding: 0 8px; gap: 6px; } body.eval-interview-active #im-toolbar { --im-toolbar-h: 52px; } body.eval-interview-active #layout { height: calc(var(--vh, 100dvh) - 52px); } .im-tl-left { min-width: 0; gap: 6px; } .im-brand-logo { height: 36px; } .im-brand-text { display: none; } .im-session-meta { display: none; } .im-problem-title { font-size: 12px; max-width: 140px; } .im-tl-right { min-width: 0; gap: 6px; } /* ── Evaluation Report — mobile fullscreen ───────────────────────────── */ .eval-report-page { top: 0 !important; } .eval-rp-topbar { padding: 0 10px; height: 48px; } .eval-rp-meta { display: none; } .eval-rp-inner { padding: 16px 12px 48px; } .eval-rp-btn { padding: 6px 10px; font-size: 11px; min-height: 36px; } .eval-rp-footer { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 14px; } /* ══════════════════════════════════════════════════════════════════════ PRICING PAGE — mobile adjustments ══════════════════════════════════════════════════════════════════════ */ body.page-pricing .an-toolbar { height: 48px; min-height: 48px; padding: 0 8px; } .pricing-shell { height: calc(var(--vh, 100vh) - 48px); } .pricing-scroll-inner { padding: 0 12px 3rem; } .pr-hero { padding: 1.5rem 0.75rem 1rem; } .pr-hero-title { font-size: clamp(1.5rem, 6vw, 2.2rem); } .pr-duration-toggle { flex-wrap: wrap; justify-content: center; } .pr-cards-grid { grid-template-columns: 1fr !important; gap: 1rem; } .pr-card { padding: 1.25rem 1rem 1rem; } /* Hide decorative floaters on mobile */ .pr-floater { display: none; } .pricing-bg { display: none; } /* ══════════════════════════════════════════════════════════════════════ PROFILE PAGE — mobile stacking ══════════════════════════════════════════════════════════════════════ */ body.page-profile .an-toolbar { height: 48px; min-height: 48px; padding: 0 8px; } .profile-shell { height: calc(var(--vh, 100vh) - 48px); } .profile-content { padding: 1.5rem 12px 3rem; } /* Hero stacks vertically */ .prof-hero { padding: 1.5rem 1rem 1.25rem; border-radius: 14px; } .prof-hero-inner { flex-direction: column; align-items: center; text-align: center; gap: 1rem; } .prof-avatar { width: 64px; height: 64px; font-size: 20px; } .prof-name { font-size: 1.25rem; } .prof-rank-row { justify-content: center; } /* Hide decorative floaters on mobile */ .profile-floater { display: none; } .profile-bg { display: none; } /* ══════════════════════════════════════════════════════════════════════ SIMULATION OUTPUT — compact on mobile ══════════════════════════════════════════════════════════════════════ */ .sim-output-panel { padding: 8px; } .sim-output-panel .sim-header { padding: 8px 10px; font-size: 12px; } /* ══════════════════════════════════════════════════════════════════════ EVALUATIONS LIST PAGE — compact cards ══════════════════════════════════════════════════════════════════════ */ .evals-content { padding: 1.5rem 0.75rem 4rem; } .evals-floater { display: none; } .evals-bg { display: none; } /* ══════════════════════════════════════════════════════════════════════ AUTH / SIGNUP MODALS — fullscreen on mobile ══════════════════════════════════════════════════════════════════════ */ .auth-modal .auth-card { width: 100vw; max-width: 100vw; min-height: 100vh; border-radius: 0; margin: 0; } .auth-card-inner { padding: 1.5rem 1rem; } } /* ═══════════════════════════════════════════════════════════════════════════ TABLET — 768px to 1023px ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 768px) and (max-width: 1023px) { :root { --topbar-height: 44px; } /* ── Toolbar — Tighter spacing ───────────────────────────────────────── */ .an-toolbar { padding: 0 12px; gap: 8px; } .an-tab { font-size: 12px; padding: 6px 10px; } .an-tl-brand-sub { display: none; } .an-tl-right { gap: 6px; } .an-feedback-btn { font-size: 11px; padding: 5px 10px; } /* ── Layout — Collapsible panels ─────────────────────────────────────── */ .layout { --left-panel-w: clamp(180px, 22vw, 230px); --right-panel-w: clamp(200px, 24vw, 260px); gap: 0.5rem; padding: 0.4rem; } /* ── Left Panel — Collapsible, narrower ──────────────────────────────── */ #left-panel { overflow-y: auto; transition: width var(--panel-transition), opacity var(--panel-transition); } .layout.left-collapsed #left-panel { width: 0; overflow: hidden; opacity: 0; padding: 0; } /* ── Right Panel — Collapsible, narrower ─────────────────────────────── */ #right-panel { transition: width var(--panel-transition), opacity var(--panel-transition); } .layout.right-collapsed #right-panel { width: 0; overflow: hidden; opacity: 0; padding: 0; } /* ── Palette — 4 columns ─────────────────────────────────────────────── */ .palette { grid-template-columns: repeat(4, 1fr); gap: 6px; } /* ── Workspace action bar — compact ──────────────────────────────────── */ #workspace-action-bar { padding: 0 10px; } .wab-btn { padding: 6px 12px; font-size: 12px; } /* ── Modals — Constrained but not fullscreen ─────────────────────────── */ .modal .modal-content { max-width: 90vw; max-height: 85vh; } /* ── Canvas toolbar ──────────────────────────────────────────────────── */ .canvas-float-toolbar { gap: 3px; padding: 4px 10px; } /* ── Roadmap View — narrower panels ──────────────────────────────────── */ #roadmap-view { --rp-panel-w: 220px; --rp-right-panel-w: 240px; } /* ── Interview Mode toolbar — compact ────────────────────────────────── */ #im-toolbar { height: 56px; min-height: 56px; padding: 0 12px; } .im-brand-logo { height: 40px; } .im-brand-text { display: none; } .im-problem-title { font-size: 13px; max-width: 220px; } /* ── Pricing cards — 2 col stays ─────────────────────────────────────── */ .pricing-scroll-inner { padding: 0 1rem 3rem; } /* ── Profile — tighter padding ───────────────────────────────────────── */ .profile-content { padding: 2rem 1.5rem 4rem; } } /* ═══════════════════════════════════════════════════════════════════════════ LARGE DESKTOP — 1440px+ More breathing room, larger panels ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1440px) { .layout { --left-panel-w: clamp(260px, 18vw, 320px); --right-panel-w: clamp(280px, 20vw, 340px); gap: 1.5rem; padding: 1rem 1.5rem 1.5rem; } } /* ═══════════════════════════════════════════════════════════════════════════ TOUCH DEVICE ENHANCEMENTS ═══════════════════════════════════════════════════════════════════════════ */ @media (hover: none) and (pointer: coarse) { /* Larger tap targets — only for primary action areas, NOT canvas/toolbar icons */ .modal-actions button, .modal-actions a, .auth-card button, .auth-card a, .pricing-shell button, .pricing-shell a, .profile-shell button, .profile-shell a, .li-eval-dropdown-item { min-height: 44px; min-width: 44px; } /* Prevent double-tap zoom */ * { touch-action: manipulation; } /* Canvas allows pinch/pan */ .canvas, .canvas-content, #canvas-content { touch-action: none; } } /* ═══════════════════════════════════════════════════════════════════════════ SAFE AREA INSETS (notched phones) ═══════════════════════════════════════════════════════════════════════════ */ @supports (padding: max(0px)) { @media (max-width: 767px) { .an-toolbar { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); } #workspace-action-bar { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); } .canvas-float-toolbar { bottom: max(8px, env(safe-area-inset-bottom)); } } } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE IMAGES & SVGS ═══════════════════════════════════════════════════════════════════════════ */ /* Only apply fluid images to content areas, NOT toolbar/UI icons */ .canvas-wrapper img, .panel-body img, .modal-content img, .lp-hero img { max-width: 100%; height: auto; } /* Toolbar logo — keep fixed size from header.css (36px on desktop) */ .an-tl-logo { max-width: none; } @media (min-width: 768px) { .an-tl-logo { height: 36px !important; width: auto !important; } } /* Preserve specific icon sizes */ .palette-item .icon, .wab-btn-icon, .cfb-btn svg, .dock-btn-icon { max-width: none; } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE TABLES ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; } } /* ═══════════════════════════════════════════════════════════════════════════ PRINT — Hide non-essential UI ═══════════════════════════════════════════════════════════════════════════ */ @media print { .an-toolbar, #workspace-action-bar, #left-panel, #right-panel, .canvas-float-toolbar, #canvas-action-dock, .floating-toggle { display: none !important; } .layout { grid-template-columns: 1fr !important; height: auto !important; max-height: none !important; } }