/* study-themes.css -- Light mode overrides, editorial redesign, theme variant styles */ /* ═══════════════════════════════════════════════════════════════════════════ CSS LAYER GUIDE, read this BEFORE you write any new CSS rule. Added 2026-05-14 after the laptop-CSS-leaks-into-desktop incident. Khio Study has 4 visual modes. They are mutually exclusive, no viewport ever has two of these classes at the same time. Pick the right scope and your changes won't leak. ┌──────────────────────────────┬──────────────────────────────────────┐ │ Body class │ When it's active │ ├──────────────────────────────┼──────────────────────────────────────┤ │ body.khio-mobile │ width < 1024 OR coarse pointer │ │ body.khio-laptop-scale │ desktop machine, viewport 1024–1907 │ │ body.khio-desktop-wide │ desktop machine, viewport ≥ 1908 │ │ (none of the above) │ Capacitor mobile app shell │ └──────────────────────────────┴──────────────────────────────────────┘ Plus one umbrella class: body.khio-desktop = khio-laptop-scale OR khio-desktop-wide ── How to scope a NEW CSS rule ── • Affects everywhere (rare) → write the rule with no body prefix • Mobile only → @media (max-width: 1023px) { ... } OR body.khio-mobile .foo { ... } • Laptop only (zoom-scaled) → body.khio-laptop-scale .foo { ... } • Wide-desktop only (native size) → body.khio-desktop-wide .foo { ... } • Both laptop + wide-desktop → body.khio-desktop .foo { ... } ── Anti-patterns that CAUSE leakage ── 1. `@media (min-width: 1024px) { .foo { ... } }` matches BOTH laptop AND wide-desktop. Use a body-class prefix instead so you control which one it hits. 2. `body.khio-desktop .foo { ... }` looks like "desktop" but it ALSO hits laptop because khio-laptop-scale implies khio-desktop. If you want WIDE-only, use `body.khio-desktop-wide`. If you want LAPTOP- only, use `body.khio-laptop-scale`. 3. Bare class selectors like `.set-card { width: 1456px; }` apply to every viewport including mobile. Always scope sizing/layout rules to the right mode. ── Smell test before you commit ── Open the page on the OPPOSITE viewport and confirm nothing changed. If a "laptop fix" altered wide-desktop, your selector is too broad , add the `body.khio-laptop-scale` prefix. The debug panel (append `?debugScale=1` to the URL) shows which body classes are currently active. Use it whenever you're unsure which scope a viewport falls into. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Light Mode ── */ [data-theme="light"] { --study-bg: #f3f4f6; --study-bg-secondary: var(--bg-card, #ffffff); --study-bg-tertiary: rgba(15,23,42,0.04); --study-bg-card: var(--bg-card, #ffffff); --study-text: #111827; --study-text-secondary: #4b5563; --study-text-tertiary: #9ca3af; --study-accent: #738396; --study-accent-hover: #5f6f83; --study-accent-dim: rgba(115,131,150,0.14); --study-border: rgba(15,23,42,0.12); --study-border-light: rgba(15,23,42,0.2); } [data-theme="light"] .study-sidebar { --sidebar-bg: var(--bg-raised, #f5f5f4); background: var(--sidebar-bg) !important; } [data-theme="light"] .khio-sidebar { background: var(--bg-raised, #f5f5f4) !important; border-right: 1px solid var(--border-subtle) !important; } [data-theme="light"] .sidebar-logo { border-bottom-color: rgba(0,0,0,0.08); } [data-theme="light"] .logo-sub { color: rgba(0,0,0,0.45); } [data-theme="light"] .logo-title { color: #111; } [data-theme="light"] .nav-item { color: #444; } [data-theme="light"] .nav-item:hover { background: rgba(0,0,0,0.04); color: #111; } [data-theme="light"] .nav-item.active { background: rgba(115,131,150,0.12); border-color: rgba(115,131,150,0.28); color: #1f2937; } [data-theme="light"] .nav-separator { background: rgba(0,0,0,0.06); } [data-theme="light"] .sidebar-footer { border-top-color: rgba(0,0,0,0.08); } [data-theme="light"] .khio-hamburger { background: rgba(255,255,255,0.85); border-color: rgba(0,0,0,0.1); color: #333; } [data-theme="light"] .khio-overlay-panel { background: rgba(255,255,255,0.95); border-left-color: rgba(0,0,0,0.08); } [data-theme="light"] .khio-overlay-link { color: #555; } [data-theme="light"] .khio-overlay-link:hover { background: rgba(0,0,0,0.04); color: #111; } [data-theme="light"] .khio-overlay-link.active { background: rgba(115,131,150,0.14); color: #334155; } [data-theme="light"] .msg-row.user .msg-bubble { color: #111; } [data-theme="light"] .msg-row.ai .msg-bubble { border-color: rgba(0,0,0,0.08); } [data-theme="light"] .msg-bubble pre { background: #f6f8fa !important; border-color: rgba(0,0,0,0.1); } [data-theme="light"] .msg-bubble code { background: rgba(0,0,0,0.06); } [data-theme="light"] .study-sidebar { background: var(--bg-raised, #f5f5f4) !important; border-right: none; } [data-theme="light"] .nav-link { color: var(--text-tertiary); } [data-theme="light"] .nav-link:hover { background: var(--bg-elevated); color: var(--text-primary); } [data-theme="light"] .nav-link.active { background: #eef2f7; color: #111827; } [data-theme="light"] .method-nav { color: #6b7280; } [data-theme="light"] .method-nav:hover { background: #f3f4f6; color: #111827; } [data-theme="light"] .method-nav.active { background: #eef2f7; color: #111827; } [data-theme="light"] .detail-right { background: #fcfbff; border-color: #ddd9ee; } [data-theme="light"] .right-tabs { background: #ffffff; border-bottom-color: #e5e7eb; } [data-theme="light"] .right-tab { color: #9ca3af; } [data-theme="light"] .right-tab.active { color: #111827; border-bottom-color: #111827; } [data-theme="light"] .right-chat-head { border-bottom-color: #f1f5f9; } [data-theme="light"] .right-chat-head-btn { background: #ffffff; border-color: #e5e7eb; color: #6b7280; } [data-theme="light"] .right-chat-head-btn:hover { color: #111827; background: #f9fafb; } /* Chat panel, unified clean palette. Was a purple-tinted gradient on .right-chat-messages with a transparent (invisible) input bubble below it, which read as "different colors and no text box". Now everything sits on plain white with a real bordered input pill at the bottom. James 2026-05-12. James 2026-05-18: also force .detail-right (the whole right sidebar container) to white in light mode. Previously the container inherited --study-bg-secondary which resolved to a slightly grey card color on some themes, producing a visible grey/white band between the chat head and the messages area. Forcing the whole panel white makes the empty-state ("Hey, I'm Khio") sit on one continuous bg. */ [data-theme="light"] .right-chat-messages { background: #ffffff; } body[data-scheme="light"] .detail-right, body[data-scheme="paper"] .detail-right, body[data-scheme="khio_light"] .detail-right, body[data-scheme="mono_light"] .detail-right, body[data-scheme="codex"] .detail-right, [data-theme="light"] .detail-right { background: #ffffff !important; } [data-theme="light"] .right-chat-empty-title { color: #111827; } [data-theme="light"] .right-chat-empty-sub { color: #6b7280; } [data-theme="light"] .right-chat-input { background: #ffffff; border: 1px solid #e9e3dd; border-radius: 16px; padding: 10px 12px 10px; box-shadow: 0 1px 0 rgba(15, 12, 8, 0.04); transition: border-color 160ms ease, box-shadow 160ms ease; } [data-theme="light"] .right-chat-input:focus-within { border-color: #d8b89a; box-shadow: 0 0 0 3px rgba(168, 80, 37, 0.10); } [data-theme="light"] .right-chat-input textarea { color: #1f2937; background: transparent; } [data-theme="light"] .right-chat-input textarea::placeholder { color: #9b938a; } [data-theme="light"] .right-chat-attach { border-color: transparent; color: #6b7280; } [data-theme="light"] .right-chat-send { background: #a85025; color: #ffffff; border: 0; } [data-theme="light"] .right-chat-send:hover { filter: none; background: #8a4118; } [data-theme="light"] .rchat-msg.ai { background: rgba(255,255,255,0.94); border-color: #dcd8ef; box-shadow: 0 12px 30px rgba(99, 102, 241, 0.08); } [data-theme="light"] .rchat-msg.ai table { background: #ffffff; border-color: #e5e7eb; } [data-theme="light"] .rchat-msg.ai thead tr { background: #f5f3ff; } [data-theme="light"] .detail-add-method-btn { background: #ffffff !important; border-color: #e2e8f0 !important; color: #475569 !important; } [data-theme="light"] .detail-add-method-btn:hover { background: #f8fafc !important; color: #1f2937 !important; } [data-theme="light"] .btn-create { background: #e7ebf0 !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; box-shadow: 0 1px 2px rgba(100,116,139,.2) !important; } [data-theme="light"] .btn-create:hover { background: #f1f5f9 !important; box-shadow: 0 2px 6px rgba(100,116,139,.22) !important; transform: translateY(-1px); } [data-theme="light"] .detail-main-inner.mode-reading #quillEditorShell { border-color: var(--border-subtle, #e5e7eb); background: var(--bg-base, #ffffff); } /* light toolbar/container overrides removed, uses CSS variables now */ /* Removed [data-theme="light"] overrides, now uses CSS variables */ /* ── Mobile back button (hidden on desktop) ── */ .btn-mobile-back { display: none; align-items: center; gap: 3px; background: none; border: none; color: var(--study-text-secondary); cursor: pointer; font-size: 13px; font-weight: 700; font-family: inherit; padding: 4px 6px; border-radius: 6px; transition: color .15s; flex-shrink: 0; } .btn-mobile-back:hover { color: var(--study-text); } .btn-mobile-back i { width: 16px; height: 16px; } /* ── Mobile Method Nav (hidden on desktop) ── When the user opens a study set on mobile, this strip of pill tabs (Course / Notes / Multiple Choice / Flashcards / etc.) STAYS pinned to the top of the scroll container instead of scrolling away with the content. JS toggles a .topbar-hidden class on this element when the user scrolls down past a small threshold and clears it on any upward scroll, so the tabs re-appear the moment you swipe back. */ .mobile-method-nav { display: none; overflow-x: auto; overflow-y: hidden; background: var(--study-bg); padding: calc(env(safe-area-inset-top, 0px) + 4px) 12px 8px; flex-shrink: 0; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; cursor: grab; user-select: none; align-items: center; position: sticky; top: 0; z-index: 30; transition: transform 0.22s ease; } .mobile-method-nav.topbar-hidden { transform: translateY(-130%); } .mobile-method-nav.grabbing { cursor: grabbing; } .mobile-method-nav::-webkit-scrollbar { display: none; } /* Rounded pill method tabs matching the review chip style */ .mobile-method-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; margin-right: 8px; border-radius: 999px; background: var(--study-bg-secondary, rgba(0,0,0,0.04)); border: 2px solid transparent; color: var(--study-text-secondary, #555); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all 0.18s ease; } .mobile-method-tab:last-child { margin-right: 0; } .mobile-method-tab:hover { color: var(--study-text, #1a1a1a); background: rgba(0,0,0,0.08); } .mobile-method-tab.active { /* Theme-fitting active state, solid accent (orange) pill instead of the previous black-with-orange-border, which clashed with the warm Focused Scholar palette. */ background: var(--study-accent, #e8853a); color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(232, 133, 60, 0.28); } .mobile-method-tab.active:hover { background: var(--study-accent, #e8853a); color: #fff; } /* Hide methods that are turned off on mobile for now (keep the data + desktop affordance, just don't surface them in the mobile method tabs row). */ .mobile-method-tab[data-method="quiz_session"], .mobile-method-tab[data-method="study_guide"], .mobile-method-tab[data-method="learn"], .mobile-method-tab[data-method="khio_tutor"] { display: none !important; } .mobile-method-tab i { width: 15px; height: 15px; } .mobile-method-tab-back { background: none !important; border: none !important; color: var(--study-text-secondary) !important; padding: 9px 8px !important; font-size: 13px !important; text-transform: uppercase; letter-spacing: 0.02em; } .mobile-method-tab-back:hover { background: none !important; } /* ── Scroll hint overlay (post-onboarding) ── */ .scroll-hint-backdrop { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10000; background: rgba(0,0,0,0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s ease; } .scroll-hint-backdrop.visible { opacity: 1; } .scroll-hint-card { position: fixed; left: 50%; transform: translateX(-50%); z-index: 10002; width: calc(100% - 40px); max-width: 340px; background: var(--study-card-bg, #fff); color: var(--study-text, #1a1a1a); border-radius: 16px; padding: 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.15); border: 1px solid var(--study-border, #e5e5e5); font-family: 'Inter', sans-serif; opacity: 0; transition: opacity .3s ease; } .scroll-hint-card.visible { opacity: 1; } .scroll-hint-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; } .scroll-hint-desc { font-size: 14.5px; line-height: 1.6; color: var(--study-text-secondary, #555); font-weight: 450; } .scroll-hint-actions { margin-top: 16px; text-align: right; } .scroll-hint-btn { background: var(--study-text, #1a1a1a); color: #fff; border: none; border-radius: 10px; padding: 8px 18px; font-size: 13.5px; font-weight: 700; font-family: 'Inter', sans-serif; cursor: pointer; } /* ── Laptop (small screens / low height) ── Keep the action cards at the bigger desktop sizing James asked for. This media query used to clamp them way down (action-label 13px, padding 18/20) which made laptop screens look mobile-sized even though they're plenty wide, bumped to a reasonable "desktop-but-shorter" tier instead. */ @media (max-height: 820px) { .hero-section { padding: 32px 32px 24px; } .hero-title { font-size: 28px !important; } .hero-sub { font-size: 11px !important; } .hero-head { margin-bottom: 18px; } .action-card { padding: 28px 24px !important; } .action-card i { margin-bottom: 14px; width: 28px; height: 28px; } .action-label { font-size: 17px !important; } .action-sub { font-size: 13px !important; } .sets-section { padding: 0 32px 20px; } .set-card { padding: 14px 16px; } .sb-widget { padding: 10px; } .sb-widget-title { font-size: 8px; margin-bottom: 6px; } .sidebar-brand { padding: 14px 16px 6px; } .sidebar-widgets { gap: 8px; } } @media (max-width: 1400px) { .hero-section { padding-left: 32px; padding-right: 32px; } .sets-section { padding-left: 32px; padding-right: 32px; } .action-cards { gap: 12px; } } /* ── Touch tablets (iPad Air / Pro 11" portrait, 769–1199px) ── When the sidebar is expanded on iPad portrait the headline wraps and 4 vertical action cards get cramped. Tighten the layout: - Hide Recent / Filter pills (sort still works via the search field) - Drop the Blank Document card (it's redundant with Paste) - 3-column grid for the remaining cards - Horizontal card layout: icon left, label+sub right. When sidebar is collapsed there's more room, so leave Recent/Filter visible in that state via the :not(.sidebar-collapsed) gate. */ /* Hide "Continue with Phone" on ALL touch devices (phone + tablet). Google + Apple cover the touch paths cleanly; phone OTP is awkward on touch and Apple sign-in is the iOS-preferred flow anyway. */ @media (pointer: coarse) { #ob2ImsgBtn, .ob2-phone-divider { display: none !important; } } /* iPad block, James 2026-05-05. pointer:coarse restored. iPad with Magic Keyboard reports pointer:fine, but with the desktop block now properly gated by body.khio-desktop plus pointer:fine + hover:hover, iPad+keyboard still falls back to default styles because the JS desktop guard rejects iPad/touch devices. max-width:1366 so iPad Pro 12.9" landscape lands here. min-height:600 added 2026-05-05 to filter out phones in landscape (iPhone Pro Max landscape is ~932×430, which was leaking into the iPad block via min-width:769). Every iPad has min-height ≥ 744 (iPad mini portrait). Body class belt: also gated by :not(.khio-phone) below inside the block so JS UA detection backs up the height filter. */ @media (pointer: coarse) and (min-width: 769px) and (max-width: 1366px) and (min-height: 600px) { /* Slightly narrower sidebar on iPad so the main content gets +25px of room for the action cards / lists. Per James 2026-05-04. */ :root { --sidebar-w: 275px; } /* Settings is an iframe, give it the full viewport on iPad (no sidebar competing for space). Desktop keeps the sidebar visible alongside settings. James 2026-05-05. */ body.in-settings .study-sidebar { display: none !important; } body.in-settings #view-settings { flex: 1 !important; width: 100% !important; } /* Study Sets: hide "New Folder" button when sidebar is expanded so the section header has room for the heading. Sidebar collapsed → button reappears. James 2026-05-05. */ .study-layout:not(.sidebar-collapsed) #view-sets #btnCreateFolder { display: none !important; } /* Review + Khio LM: hide Recent / Filter chips in both states (sidebar opened or collapsed), James asked to drop them on iPad entirely. Sort still works via the filter input below. */ #view-review .review-landing-header > div:last-child { display: none !important; } #view-review .review-landing-header [class*="hero-filter-btn"] { display: none !important; } #view-solve .klm-picker-filters { display: none !important; } /* Tighten the heading so it fits in one or two clean lines on iPad portrait without the right-side filter cluster pushing it. */ #view-review .review-landing-header .hero-title, #view-solve .klm-picker-header .hero-title { font-size: 44px !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; } #view-review .review-landing-header .hero-sub, #view-solve .klm-picker-header .hero-sub { font-size: 15px !important; line-height: 1.45 !important; margin-top: 8px !important; } /* Khio LM picker, bump cards taller + bigger type so the row fills more of the iPad canvas. James 2026-05-05. */ #view-solve .klm-picker-card, #view-solve .klm-picker-card-create { min-height: 220px !important; padding: 28px 22px !important; border-radius: 20px !important; } #view-solve .klm-picker-card-plus { width: 56px !important; height: 56px !important; margin-bottom: 14px !important; } #view-solve .klm-picker-card-plus i { width: 28px !important; height: 28px !important; } #view-solve .klm-picker-card-create > div:not(.klm-picker-card-plus) { font-size: 17px !important; } #view-solve .klm-picker-card-create > div + div { font-size: 11px !important; margin-top: 4px !important; } #view-solve .klm-picker-card-title, #view-solve .klm-picker-card .set-card-title { font-size: 17px !important; line-height: 1.25 !important; } #view-solve .klm-picker-card-meta { font-size: 13px !important; } /* iPad sidebar items: bigger + more breathing room to match the iPhone/mobile drawer feel James referenced 2026-05-05. */ .sidebar-mwd-styled #navHome .nav-link { padding: 14px 16px !important; border-radius: 14px !important; font-size: 15px !important; gap: 14px !important; } .sidebar-mwd-styled #navHome .nav-link i { width: 20px !important; height: 20px !important; } .sidebar-mwd-styled .sidebar-mwd-name { font-size: 16px !important; } .sidebar-mwd-styled .sidebar-mwd-avatar { width: 48px !important; height: 48px !important; border-radius: 14px !important; } .sidebar-mwd-styled .sidebar-mwd-avatar-initial { font-size: 19px !important; } .sidebar-mwd-styled .sidebar-mwd-header { gap: 14px !important; padding: 22px 16px 16px !important; } /* ── Study Sets dashboard (#view-sets) ── */ .study-layout:not(.sidebar-collapsed) .hero-search-wrap { display: none !important; } /* action-sub stays visible in the new square-tile layout (was hidden in the old horizontal layout). */ #actionBlank { display: none !important; } /* Study Sets has 3 cards (after dropping Blank). Review's .review-landing .action-cards has 2 cards, leave it alone. */ #view-sets .action-cards { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; } .hero-section { padding-bottom: 32px !important; } .sets-section { padding-top: 8px !important; } .sets-grid { gap: 14px !important; } /* ── Khio LM (#view-solve), match Study Sets parity ── */ .study-layout:not(.sidebar-collapsed) .klm-picker-filters { display: none !important; } .klm-picker-grid { gap: 14px !important; } /* Always show the inline "+ New Notebook" + "Add Existing Set" cards on iPad. The mobile @media (max-width: 760px) CSS blocks in study-mobile.css and study.css hide them via .klm-picker-card-create { display: none !important; } so that mobile can swap to a FAB. iPad portrait at 820px doesn't hit that breakpoint, so this is just a safety net to ensure nothing else hides them. James 2026-05-05. */ .klm-picker-card-create { display: flex !important; } /* ── Review (#view-review), hide hero-filter buttons in landing ── */ .study-layout:not(.sidebar-collapsed) .review-landing-header [class*="hero-filter-btn"] { display: none !important; } .study-layout:not(.sidebar-collapsed) .review-landing-header > div:last-child { display: none !important; } /* ── Action cards: square-ish vertical tiles on iPad ── James 2026-05-05: previous layout was horizontal grid (icon left, text right) which read as rectangles. New look matches the mockup he provided, icon at top in a colored circle, label centered below, sub centered below that. Same layout regardless of sidebar state. aspect-ratio:1 keeps each tile square in any column width the grid resolves to. */ .study-layout .action-card, .study-layout.sidebar-collapsed .action-card, .study-layout:not(.sidebar-collapsed) .action-card { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 8px !important; padding: 22px 14px !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; grid-column-gap: 0 !important; grid-row-gap: 0 !important; } .study-layout .action-card .action-icon-circle, .study-layout.sidebar-collapsed .action-card .action-icon-circle, .study-layout:not(.sidebar-collapsed) .action-card .action-icon-circle { grid-column: unset !important; grid-row: unset !important; margin: 0 0 4px 0 !important; width: 52px !important; height: 52px !important; border-radius: 999px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; align-self: center !important; } .study-layout .action-card .action-icon-circle i, .study-layout.sidebar-collapsed .action-card .action-icon-circle i, .study-layout:not(.sidebar-collapsed) .action-card .action-icon-circle i { width: 22px !important; height: 22px !important; } .study-layout .action-card .action-label, .study-layout.sidebar-collapsed .action-card .action-label, .study-layout:not(.sidebar-collapsed) .action-card .action-label { grid-column: unset !important; grid-row: unset !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important; margin: 0 !important; text-align: center !important; min-width: 0 !important; color: #15172a !important; } .study-layout .action-card .action-sub, .study-layout.sidebar-collapsed .action-card .action-sub, .study-layout:not(.sidebar-collapsed) .action-card .action-sub { grid-column: unset !important; grid-row: unset !important; display: block !important; font-size: 12px !important; line-height: 1.35 !important; margin: 0 !important; text-align: center !important; min-width: 0 !important; color: rgba(15,23,42,0.5) !important; } } /* ── Narrow non-touch desktop windows (601–1023px), auto-collapse sidebar ── 2026-05-04: Added `(hover: hover)` so this rule does NOT fire on touch tablets like iPad Air / Pro 11" (820/834px touch). On those, we keep the full sidebar, auto-collapsing on iPad was the "tiny icon-only sidebar" iPad-rejection symptom James flagged. Below this rule the tablet-specific iPad layout takes over via @media (...pointer: coarse). */ @media (max-width: 1023px) and (hover: hover) { .detail-right { display: none; } .sidebar-resize-handle { display: none; } .right-sidebar-reopen { display: none !important; } /* Auto-collapse the study sidebar to icon-only mode */ .study-sidebar { width: var(--sidebar-w-collapsed, 72px); } .study-sidebar .sidebar-brand-text-wrap, .study-sidebar .sidebar-brand-text, .study-sidebar .sidebar-brand-sub, .study-sidebar .nav-link-label, .study-sidebar .method-nav-label, .study-sidebar .method-nav-group-label, .study-sidebar .sidebar-username, .study-sidebar .token-badge, .study-sidebar .sidebar-footer .user-name, .study-sidebar .sidebar-footer-row { display: none !important; } .study-sidebar .method-nav-group-label.detail-group-heading-row { display: flex !important; } .study-sidebar .sidebar-brand-wrap { flex-direction: column; justify-content: center; align-items: center; padding: 10px 8px 8px; min-height: 78px; } .study-sidebar .sidebar-collapse-btn { display: inline-flex !important; } .study-sidebar .sidebar-nav { padding: 8px 10px; } .study-sidebar .nav-link, .study-sidebar .method-nav { justify-content: center; padding: 10px 8px; gap: 0; } .study-sidebar .method-nav-group-label { margin: 0; padding: 0; } .study-sidebar .sidebar-widgets { display: none; } .study-sidebar .sidebar-footer { align-items: center; padding: 10px 8px; } .study-sidebar .sidebar-user { justify-content: center; width: 100%; padding: 6px; } .study-sidebar .sidebar-avatar { margin: 0; } /* Compact action cards to 2-col */ .action-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; } .action-card { padding: 16px 12px; } .action-label { font-size: 13px; } .action-desc { font-size: 11px; } .hero-title { font-size: 28px; } /* Compact sets grid */ .hero-section { padding: 28px 20px 20px; } .sets-section { padding-left: 20px; padding-right: 20px; } } /* ── Mobile, full mobile layout with bottom nav ── */ /* Only triggers on actual touch devices (pointer:coarse), OR very narrow screens (≤480px) as fallback */ @media (max-width: 768px) and (pointer: coarse) , (max-width: 480px) { .study-sidebar { display: none; } .study-layout { display: block; } .study-main { height: 100dvh; padding-bottom: 64px; } .mobile-nav { display: flex !important; } .study-view { padding-bottom: 20px; } .mc-grid { grid-template-columns: 1fr; } .grade-cards { grid-template-columns: 1fr; } .sets-grid.grid-view { grid-template-columns: 1fr; } .methods-grid { grid-template-columns: 1fr; } .hero-title { font-size: 24px; } .hero-section { padding: 28px 16px 20px; } .action-cards { grid-template-columns: 1fr; gap: 12px; } .action-card { max-width: 100%; } .set-card-badges { display: none; } .set-card-methods { display: none; } .grade-result-layout { flex-direction: column; } .grade-result-left { width: 100%; } .grade-score-card { padding: 20px; } .grade-score-num { font-size: 42px; } .grade-rubric-row { flex-direction: column; } /* Show mobile-only elements in detail view */ .btn-mobile-back { display: flex !important; } .mobile-method-nav.detail-active { display: flex !important; align-items: center; overflow-x: auto; overflow-y: hidden; /* Sticky so the Course/Notes/Multiple Choice/Flashcards pills stay pinned to the top of .detail-main as the user scrolls down through the lesson content. The sibling pseudo-rule .mobile-method-nav.topbar-hidden adds a translateY(-130%) when JS detects a scroll-down gesture (attachMobileMethodNavScrollHide). */ position: sticky; top: 0; z-index: 55; background: var(--study-bg, #f6f6f8); padding: calc(env(safe-area-inset-top, 0px) + 4px) 12px 8px; -webkit-overflow-scrolling: touch; transition: transform 0.22s ease; } body[data-theme="dark"] .mobile-method-nav.detail-active { background: #09090b; } /* The nav's `position: sticky` only works if scrolling actually happens on its parent (.detail-main). By default .detail-main-inner has its own `overflow-y: auto` so content scrolls INSIDE it, leaving .detail-main effectively static and the sticky nav stuck above a scroll that doesn't exist. Collapse the inner scroll on mobile so all scrolling bubbles up to .detail-main, where the sticky nav can do its job. */ .study-layout.detail-active .detail-main-inner, .study-layout.detail-active .detail-main-inner.mode-reading { overflow-y: visible !important; height: auto !important; min-height: 0; } .mobile-method-nav.detail-active:empty { display: none !important; } /* Hide desktop-only detail controls */ #btnToggleRight { display: none !important; } .detail-meta-desktop { display: none !important; } /* Truncate long set titles */ .detail-topbar-title { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .study-layout.detail-active .detail-topbar, .study-layout.detail-active .detail-topbar.visible { display: none !important; } .study-layout.detail-active .study-main { padding-top: 0 !important; } /* When the mobile method nav lands inside a padded scroll container (e.g. .detail-main-inner with 16px top padding) the container's padding pushes the nav down and exposes a white bar above the tabs. Zero the padding-top when the nav is the container's first child so the nav's own safe-area padding covers the notch cleanly. */ .study-layout.detail-active .detail-main-inner:has(> .mobile-method-nav.detail-active:first-child), .study-layout.detail-active .detail-main:has(> .mobile-method-nav.detail-active:first-child), .study-layout.detail-active #modeContent:has(> .mobile-method-nav.detail-active:first-child), .study-layout.detail-active #quillEditorShell:has(> .mobile-method-nav.detail-active:first-child) { padding-top: 0 !important; } /* Belt-and-braces: paint study-main with the same bg as the method nav so any micro-gap during placement is invisible. */ .study-layout.detail-active .study-main { background: var(--study-bg) !important; } /* KhioAI, hide sidebar + topbar on mobile */ .khioai-chats-sidebar { display: none !important; } .khioai-topbar { display: none !important; } /* Tighter detail main padding */ .detail-main-inner { padding: 16px 12px; } .detail-main-inner.mode-reading { padding: 8px 8px 14px; } .detail-main-inner.mode-reading #quillEditorShell { height: calc(100dvh - 170px); min-height: calc(100dvh - 170px); border-radius: 10px; } } @media (max-width: 640px) { .solve-heading, .grade-heading { font-size: 22px; } } .mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; pointer-events: none; background: transparent; } [data-theme="dark"] .mobile-nav { background: transparent; } [data-theme="light"] .mobile-nav { background: transparent; } body.mobile-app .mobile-nav, body.capacitor-app .mobile-nav { background: transparent; padding-bottom: 0 !important; } /* Force-hide the mobile nav on desktop widths, regardless of any inline style set by study-core.js showView() from a prior state */ @media (min-width: 761px) { .mobile-nav, #mobileNav { display: none !important; visibility: hidden !important; } } .mobile-nav.detail-hidden { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* ════ Split mobile nav: Sets circle | [Review|KhioLM] pill | Create circle ════ */ .mobile-nav-inner, body[data-scheme] .mobile-nav-inner { display: flex !important; align-items: center; justify-content: center; gap: 12px; width: auto; max-width: none; margin: 0 auto calc(39px + env(safe-area-inset-bottom, 0px)); padding: 0 16px; background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; border: none !important; border-radius: 0; box-shadow: none !important; pointer-events: none; } .mobile-nav-inner::before, .mobile-nav-inner::after { content: none; display: none; } /* ── Circular icon button (Sets) ── */ .mnav-circle, body[data-scheme] .mnav-circle { width: 54px; height: 54px; display: flex !important; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.22) !important; background: #8e8e90 !important; backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); border-radius: 50% !important; color: rgba(255,255,255,.92) !important; padding: 0; cursor: pointer; pointer-events: all; flex-shrink: 0; transition: transform .15s ease, background .2s ease; box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.12); } .mnav-circle:active { transform: scale(.92); } .mnav-circle.active, body[data-scheme] .mnav-circle.active, body[data-scheme] .mnav-circle.mobile-nav-btn.active { background: #9f9fa1 !important; color: #fff !important; border-color: rgba(255,255,255,.35) !important; box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.15) !important; } .mnav-circle i, .mnav-circle svg { width: 22px; height: 22px; stroke-width: 2; color: inherit; } /* ── Segmented pill (Review | Khio LM) ── */ .mnav-segment { display: flex; align-items: center; gap: 0; padding: 5px; background: #8e8e90; backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); border: 1px solid rgba(255,255,255,.22); border-radius: 36px; box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.12); pointer-events: all; } .mnav-seg-btn, body[data-scheme] .mnav-seg-btn { width: 76px; height: 44px; display: flex !important; align-items: center; justify-content: center; border: none !important; background: transparent !important; color: rgba(255,255,255,.78) !important; padding: 0; cursor: pointer; border-radius: 30px !important; transition: all .2s ease; } .mnav-seg-btn:active { transform: scale(.94); } .mnav-seg-btn i, .mnav-seg-btn svg { width: 22px; height: 22px; stroke-width: 2; color: inherit; } .mnav-seg-btn.active, body[data-scheme] .mnav-seg-btn.active, body[data-scheme] .mnav-seg-btn.mobile-nav-btn.active { background: #9f9fa1 !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 6px rgba(0,0,0,.14) !important; } /* ── Create button, solid accent circle ── */ .mnav-circle-create, body[data-scheme] .mnav-circle-create, body[data-scheme] .mnav-circle-create.active, body[data-scheme] .mnav-circle-create.mobile-nav-btn.active { background: linear-gradient(135deg, #f39336 0%, #e8853a 45%, #d46d22 100%) !important; border: 1px solid rgba(255,255,255,.18) !important; color: #fff !important; box-shadow: 0 10px 28px rgba(232,133,58,.45), 0 3px 12px rgba(232,133,58,.22), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.18) !important; } .mnav-circle-create:active { transform: scale(.9); } .mnav-circle-create i, .mnav-circle-create svg { width: 26px; height: 26px; stroke-width: 2.6; } /* Hide the old btn-inner span wrappers if any slip in */ .mobile-nav-btn > span, .mobile-nav-btn .mobile-nav-btn-inner { display: none !important; } /* Compact 4-item layout (Sets · [Review|KLM] · Solve · Create). Default sizes (54px circles, 12px gap, 76px segment buttons) sum to ~394pt which is 4pt wider than iPhone 14 viewport (390pt) and pushes the rightmost button off-screen. Shrink everything down to fit 375pt (iPhone SE) with margin. */ @media (max-width: 430px) { .mobile-nav-inner, body[data-scheme] .mobile-nav-inner { gap: 8px !important; padding: 0 10px !important; } .mnav-circle, body[data-scheme] .mnav-circle { width: 48px !important; height: 48px !important; } .mnav-circle i, .mnav-circle svg { width: 20px !important; height: 20px !important; } .mnav-seg-btn, body[data-scheme] .mnav-seg-btn { width: 60px !important; height: 40px !important; } .mnav-seg-btn i, .mnav-seg-btn svg { width: 20px !important; height: 20px !important; } .mnav-segment { padding: 4px !important; } .mnav-circle-create i, .mnav-circle-create svg { width: 22px !important; height: 22px !important; } } /* Hide new mobile dashboard header on desktop */ .mobile-dashboard-header, .mobile-dashboard-create, .mobile-greeting { display: none; } /* ════════════════════════════════════════════════════════════════ ▓▓▓ FOCUSED SCHOLAR, MOBILE DASHBOARD REDESIGN ▓▓▓ Transforms the mobile sets/review/klm landing to match the new design: clean top bar with hamburger + avatar, welcome block with streak pill, big rounded set cards. ════════════════════════════════════════════════════════════════ */ @media (max-width: 760px) { /* SAFE-AREA-TOP PAINT PATCH, settings view only. body.in-settings is toggled by showView('settings') in study-core.js / study.js. When the user opens settings via the profile-pic menu, paint a fixed-position #fafafa strip over the iPhone status-bar region so it matches the gray settings page below. Other views (sets/review/KLM/ask/grade) paint their own white-or-themed top, which we leave alone. */ body.in-settings::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: #fafafa; z-index: 9999; pointer-events: none; } body.in-settings[data-theme="dark"]::before { background: #09090b; } /* ── Page canvas ── Use the same #fafafa used by every embedded settings/sub-view and by the mobile body bg. Any drift between this and the embedded view bg shows up as a visible band at the top of the screen behind the iOS status bar (`.study-main`'s safe-area-top padding paints THIS color, while the view below paints its own bg). */ body.mobile-app .study-main, body.capacitor-app .study-main, body[data-scheme] .study-main { background: #fafafa !important; } body[data-theme="dark"] .study-main, body[data-theme="dark"] .study-main { background: #09090b !important; } /* Hide the old desktop-style hero section on mobile */ .sets-section { padding: 0 20px !important; } .hero-section { display: none !important; } .sets-section-header { display: none !important; } .mobile-collection-search { display: none !important; } /* Hide the middle method-icons row on cards, new design doesn't show them */ .review-set-methods, .scholar-set-methods-legacy { display: none !important; } /* Show the storage usage bar on the mobile dashboard, matches the inline "0/5 sets · 0 KB/50 MB" row: plain text on the left and a thin progress bar on the right. No card / no bubble / no background, just floats in the parent view's canvas. */ #studyUsageBar, .study-usage-bar { display: flex !important; align-items: center; justify-content: center; /* center the usage text under the Create button */ gap: 14px; margin: 6px 20px 14px; padding: 0; border-radius: 0; background: transparent !important; border: none !important; box-shadow: none !important; text-align: center; } #studyUsageBar .study-usage-info, .study-usage-bar .study-usage-info { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: var(--study-text-secondary, #475569); letter-spacing: -0.01em; white-space: nowrap; } #studyUsageBar .study-usage-info > span + span::before, .study-usage-bar .study-usage-info > span + span::before { content: "·"; margin-right: 10px; color: var(--study-text-tertiary, #94a3b8); } #studyUsageBar .study-usage-track, .study-usage-bar .study-usage-track { flex: 1; min-width: 0; height: 4px; border-radius: 99px; background: var(--study-border, rgba(15,23,42,.12)); overflow: hidden; } #studyUsageBar .study-usage-fill, .study-usage-bar .study-usage-fill { height: 100%; background: var(--study-accent, #c1724e); border-radius: 99px; transition: width 0.3s ease; } #studyUsageBar .study-usage-fill.warn, .study-usage-bar .study-usage-fill.warn { background: #f59e0b; } #studyUsageBar .study-usage-fill.critical, .study-usage-bar .study-usage-fill.critical { background: #ef4444; } body[data-theme="dark"] #studyUsageBar .study-usage-info, body[data-theme="dark"] .study-usage-bar .study-usage-info, body[data-theme="dark"] #studyUsageBar .study-usage-info, body[data-theme="dark"] .study-usage-bar .study-usage-info { color: rgba(255,255,255,0.70); } body[data-theme="dark"] #studyUsageBar .study-usage-track, body[data-theme="dark"] .study-usage-bar .study-usage-track, body[data-theme="dark"] #studyUsageBar .study-usage-track, body[data-theme="dark"] .study-usage-bar .study-usage-track { background: rgba(255,255,255,0.12); } /* ── Top App Bar ── */ .mobile-dashboard-header { display: flex !important; flex-direction: column; gap: 0; padding: calc(env(safe-area-inset-top, 0px) + 26px) 18px 12px !important; background: transparent !important; border: none !important; } .mobile-dashboard-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; } .mobile-library-topbar { min-height: 58px; } .mobile-view-switcher { display: flex; align-items: center; justify-content: flex-start; gap: 0; flex: 1 1 auto; min-width: 0; background: none; border: none; padding: 0; cursor: pointer; /* Ramillas, the custom serif used on the Khio Study landing page hero. Already loaded by study-core.css's @font-face. Matches the brand's display typography. Title hugs the left edge (right next to the PFP) per James's feedback "move it closer to the pfp." */ font-family: 'Ramillas', 'Playfair Display', Georgia, serif; font-size: 30px; line-height: 1.05; font-weight: 500; /* Use --text-primary so the color tracks whatever theme is actually painted. Previously keyed on body[data-theme="dark"] which would desync when html data-theme updated but body didn't (or vice versa), making the title invisible. */ color: var(--text-primary, #000); letter-spacing: -0.01em; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-view-switcher span { text-align: left; } .mobile-dashboard-topbar.mobile-library-topbar { gap: 8px; } .mobile-view-switcher span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .mobile-view-switcher i, .mobile-view-switcher svg { width: 26px; height: 26px; color: #ab2d00; stroke-width: 2.2; flex-shrink: 0; } body[data-theme="dark"] .mobile-view-switcher i, body[data-theme="dark"] .mobile-view-switcher i, body[data-theme="dark"] .mobile-view-switcher svg, body[data-theme="dark"] .mobile-view-switcher svg { color: #ff7851; } .mobile-view-switcher:active { transform: scale(.97); } /* PFP: transparent inside, slim black ring outside. Ring thinned from 4px → 2px (and inner padding 4px → 2px) per James's "make the black outline less thick", keeps the same overall avatar footprint while letting the photo fill more of the circle. */ .mobile-collection-profile, #mobileGreetingProfile { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: transparent; padding: 2px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 0 2px #000; border: none; } body[data-theme="dark"] .mobile-collection-profile, body[data-theme="dark"] #mobileGreetingProfile { box-shadow: 0 0 0 2px #f4f4f5; } .mobile-collection-profile .mobile-greeting-avatar, .mobile-collection-profile .mobile-collection-avatar { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #2d2f31; font-size: 14px; font-weight: 800; background: #f6f6f8; border-radius: 50%; letter-spacing: 0; text-transform: uppercase; } /* Initial-letter avatars get a warm accent-colored circle so they read as a real avatar, not a placeholder. */ .mobile-collection-profile .mobile-collection-avatar--initial { background: linear-gradient(135deg, #ff8a55 0%, #e8853a 100%); color: #fff; box-shadow: 0 1px 4px rgba(232, 133, 60, 0.28); } /* Icon-only avatars (no name/email available, typical for Apple Sign In users who hid both) get a clean person silhouette in a soft orange-tinted circle. Much nicer than showing a literal "?" character. */ .mobile-collection-profile .mobile-collection-avatar--icon { background: rgba(232, 133, 60, 0.12); color: #e8853a; } .mobile-collection-profile .mobile-collection-avatar--icon svg { width: 60%; height: 60%; } body[data-theme="dark"] .mobile-collection-profile .mobile-collection-avatar--initial { background: linear-gradient(135deg, #ff8a55 0%, #e8853a 100%); color: #fff; } body[data-theme="dark"] .mobile-collection-profile .mobile-collection-avatar--icon { background: rgba(232, 133, 60, 0.18); color: #ff8a55; } /* Apple Sign In users almost never have a name/photo (private relay + hidden name), so they always land on the icon variant. Lean into it: solid theme-colored circle with a white silhouette so it reads as a real branded avatar instead of a soft placeholder. Only applies when the body has body.khio-signup-apple set at boot from localStorage. */ body.khio-signup-apple .mobile-collection-profile .mobile-collection-avatar--icon { background: linear-gradient(135deg, #ff8a55 0%, #e8853a 100%); color: #fff; box-shadow: 0 1px 4px rgba(232, 133, 60, 0.28); } body.khio-signup-apple[data-theme="dark"] .mobile-collection-profile .mobile-collection-avatar--icon { background: linear-gradient(135deg, #ff8a55 0%, #e8853a 100%); color: #fff; } body[data-theme="dark"] .mobile-collection-profile .mobile-collection-avatar, body[data-theme="dark"] .mobile-collection-profile .mobile-collection-avatar { background: #17181b; color: #f4f4f5; } .mobile-collection-profile .mobile-collection-avatar-image { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .mobile-library-folder { width: 48px; height: 48px; border: none; background: transparent; /* Match the original hamburger menu color (the rust/orange that lived on the workspace switcher icon before the topbar redesign). #ab2d00 is the same accent we use throughout the app for nav glyphs. */ color: #ab2d00; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .mobile-library-folder svg, .mobile-library-folder i { width: 32px; height: 32px; stroke-width: 2.4; } body[data-theme="dark"] .mobile-library-folder { color: #ff7851; } @media (max-width: 380px) { .mobile-view-switcher { font-size: 26px; } .mobile-collection-profile, #mobileGreetingProfile { width: 48px; height: 48px; } .mobile-library-folder { width: 44px; height: 44px; } .mobile-library-folder svg, .mobile-library-folder i { width: 28px; height: 28px; } } /* ── Welcome Hero ── */ .mobile-dashboard-hero { display: flex; flex-direction: column; gap: 4px; width: 100%; } .mobile-dashboard-kicker { display: none !important; } .mobile-dashboard-heading-row { display: flex; align-items: center; justify-content: flex-start; gap: 16px; width: 100%; margin-top: 0; } .mobile-dashboard-heading { display: none !important; } .mobile-dashboard-streak { display: none !important; } /* Create-set CTA button */ .mobile-dashboard-create { display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 22px; border-radius: 18px; border: 1px solid rgba(255, 120, 81, 0.25); background: linear-gradient(135deg, #ff7851 0%, #e8853a 55%, #ab2d00 100%); color: #fff; font-family: 'Manrope', 'Inter', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; box-shadow: 0 12px 28px rgba(232, 90, 12, 0.32), 0 4px 10px rgba(232, 90, 12, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 4px rgba(0, 0, 0, 0.15); transition: transform .15s ease; } .mobile-dashboard-create:active { transform: scale(.97); } .mobile-dashboard-create i, .mobile-dashboard-create svg { width: 22px; height: 22px; stroke-width: 2.6; color: #fff; flex-shrink: 0; } body[data-theme="dark"] .mobile-dashboard-create, body[data-theme="dark"] .mobile-dashboard-create { box-shadow: 0 12px 28px rgba(232, 90, 12, 0.42), 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3); } /* Hide the bottom nav bar on mobile, hamburger menu handles navigation */ .mobile-nav, #mobileNav, #khio-pwa-tabbar { display: none !important; } /* Unify ALL background layers so there's no seam/strip anywhere. Includes a specificity match for premium.css line 87's `body[data-scheme][data-scheme="light"] { background: #ffffff }` which was painting the status-bar strip pure white. */ html, body, html body, html[data-theme="light"], html[data-theme="light"] body, body[data-scheme="light"], body[data-scheme="github"], html body[data-scheme][data-scheme="light"], body[data-scheme][data-scheme="light"], .study-layout, body[data-scheme] .study-layout, .study-main, body[data-scheme] .study-main, .dashboard-main, .study-view, .app-layout, .app-main { background: #fafafa !important; background-color: #fafafa !important; } body[data-theme="dark"], body[data-theme="dark"] html, body[data-theme="dark"] .study-layout, body[data-theme="dark"] .study-main, body[data-theme="dark"] .dashboard-main, body[data-theme="dark"] .study-view, body[data-theme="dark"] .app-layout, body[data-theme="dark"] .app-main, body[data-scheme="dark"] .study-view, body[data-scheme="graphite"] .study-view, body[data-scheme="khio_dark"] .study-view, body[data-scheme="ember"] .study-view, body[data-scheme="nord"] .study-view, body[data-scheme="tokyo"] .study-view, body[data-scheme="dark"] .app-layout, body[data-scheme="graphite"] .app-layout, body[data-scheme="khio_dark"] .app-layout, body[data-scheme="ember"] .app-layout, body[data-scheme="dark"] .app-main, body[data-scheme="graphite"] .app-main, body[data-scheme="khio_dark"] .app-main, body[data-scheme="ember"] .app-main { background: #09090b !important; background-color: #09090b !important; } /* Clean bottom, minimal padding, rely on safe-area inset only */ .dashboard-main { padding-bottom: env(safe-area-inset-bottom, 0px) !important; } /* Guarantee content area is tall enough that its bg paints all the way to the screen bottom even when the list is short */ .study-main, .dashboard-main { min-height: calc(100vh - 0px); min-height: 100dvh; } /* Kill any stray bottom borders from legacy layouts */ .mobile-nav, #mobileNav { border: 0 !important; } /* ── Recent Sets section (all three views) ── */ .mobile-greeting + .sets-section, .mobile-dashboard-header + .sets-section { margin-top: 12px; padding: 0 20px 24px !important; } #setsGrid.sets-grid, .review-set-grid, #klmPickerGrid { display: flex !important; flex-direction: column; gap: 14px !important; grid-template-columns: none !important; } /* Hide the desktop hero + action cards on Review so the mobile dashboard header + sets list are the only chrome */ #view-review .hero-section, #view-review .sets-section-header, #view-review .mobile-empty-prompt ~ .action-cards { display: none !important; } /* Normalize the review-landing padding so everything sits at the same 20px gutter as Study Sets (was 12px in study-mobile.css, which made cards look off-center vs the header) */ .review-landing, #view-review .review-landing { padding: 0 !important; margin: 0 !important; max-width: none !important; } /* Match Study Sets gap, the big gap between header and list came from a 28px top margin + extra padding on sets-section */ .review-landing .sets-section, #view-review .review-landing .sets-section { padding: 0 20px 24px !important; margin: 0 !important; } .review-landing .sets-section::before, #view-review .sets-section::before { content: "Your Review Sets"; } .review-landing .review-set-grid { display: flex !important; flex-direction: column !important; gap: 14px !important; /* 18px top so the first card sits below the page header with the same gap as Study Sets (.sets-grid uses margin-top: 18px). This rule's specificity was beating the study-mobile.css attempt to set padding-top, so the value lives here now. */ padding: 18px 0 0 !important; margin: 0 !important; } /* KLM picker container same 20px gutter */ #view-solve .klm-picker-container, .klm-picker-container { padding: 0 20px 24px !important; margin: 28px 0 0 !important; } #klmPickerGrid { /* Horizontal 16px so notebook cards don't run flush to the viewport edges on mobile. The ID selector beats the .klm-picker-grid rule in study-mobile.css, so this is the one that wins. 18px top to match the same gap that Study Sets shows above its first card. */ padding: 18px 16px 8px !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 14px !important; grid-template-columns: none !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } .klm-picker-row { cursor: pointer; } /* Empty state on Khio LM: zero #klmPickerGrid's 16px horizontal padding so the peach .mobile-empty-prompt card sits at the same 18px outer-margin as the Sets / Review empty cards. Without this the card lands at 34px (16px parent padding + 18px own margin), which read as "narrower than the others." Reverts the moment renderKlmPicker drops .is-empty-scroll-lock after the user creates their first notebook, so real notebook rows still get the 16px gutter they need. */ #view-solve.is-empty-scroll-lock #klmPickerGrid { padding: 0 !important; } /* Raw usage bar (.study-usage-bar / #studyUsageBar) is shown on mobile as plain inline text, see the rules above. The old kill rule used to hide it here; removed so "0/5 sets" shows. */ /* ── Real .sets-section-head row: title left, inline pill right after ── */ .sets-section, .review-landing .sets-section, .klm-picker-container { position: relative; } .sets-section-head { display: flex; align-items: center; gap: 12px; padding: 8px 0 14px; flex-wrap: nowrap; } .sets-section-head .sss-title { font-family: 'Manrope', 'Inter', sans-serif; font-size: 1.125rem; font-weight: 700; color: #2d2f31; letter-spacing: -0.01em; text-transform: none; margin: 0; flex-shrink: 0; line-height: 1.2; } body[data-theme="dark"] .sets-section-head .sss-title, body[data-theme="dark"] .sets-section-head .sss-title { color: #f4f4f5; } /* Inline storage pill, sits right after the title, no absolute */ .inline-storage-pill { position: static; display: flex; align-items: center; gap: 8px; pointer-events: none; font-family: 'Manrope', 'Inter', sans-serif; margin-top: 6px; } .inline-storage-pill .isp-text { font-size: 11px; font-weight: 600; color: #5a5c5d; letter-spacing: 0; white-space: nowrap; } body[data-theme="dark"] .inline-storage-pill .isp-text, body[data-theme="dark"] .inline-storage-pill .isp-text { color: #9ca0a6; } .inline-storage-pill .isp-track { display: block; width: 60px; height: 4px; background: rgba(15, 23, 42, 0.08); border-radius: 999px; overflow: hidden; flex-shrink: 0; } body[data-theme="dark"] .inline-storage-pill .isp-track, body[data-theme="dark"] .inline-storage-pill .isp-track { background: rgba(255,255,255,0.1); } .inline-storage-pill .isp-fill { display: block; height: 100%; background: #ab2d00; border-radius: 999px; transition: width .3s ease; } .inline-storage-pill .isp-fill--warn { background: #d97706; } .inline-storage-pill .isp-fill--critical { background: #b31b25; } /* Remove the legacy floating "+ Create New" FAB in Khio LM , the new mobile dashboard header already has a Create CTA */ #klmMobileFab, .klm-mobile-fab, .klm-mobile-fab-bar, .klm-mobile-fab-create { display: none !important; } /* Old pseudo-element headings are replaced by real .sets-section-head elements injected by renderStudyUsageBar. Kill the pseudo's. */ .sets-section::before, .klm-picker-container::before { content: none !important; display: none !important; } /* ── Card meta: allow wrap so "5 due" doesn't orphan ── */ .review-set-meta, .scholar-set-meta { flex-wrap: wrap !important; row-gap: 2px !important; } /* ── Card title: wrap cleanly inside the card, never overflow ── */ .scholar-set-row .scholar-set-copy, .scholar-set-row .review-set-copy, .scholar-set-row .review-set-info { min-width: 0 !important; overflow: hidden; } .scholar-set-row .set-card-title, .scholar-set-row h4 { overflow-wrap: break-word !important; word-break: normal !important; hyphens: auto; text-wrap: balance; min-width: 0; max-width: 100%; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; } /* ── Set card (Focused Scholar style), MOBILE compact size ── Earlier these had padding:36px 32px / min-height:200px / badge:76 / title:20px from the "twice as big lengthwise" request. James later clarified that bump should be desktop only, see the @media (min-width:761px) block below. Mobile now sits at the original compact size. */ .set-card.scholar-set-row, .review-set-row.scholar-set-row { display: flex !important; align-items: center; gap: 16px; padding: 18px 18px !important; min-height: 96px; border-radius: 18px !important; background: #ffffff !important; border: 1px solid rgba(15, 23, 42, 0.04) !important; box-shadow: 0 8px 24px -10px rgba(45, 47, 49, 0.08) !important; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease; position: relative; } .scholar-set-row .scholar-set-badge, .scholar-set-row .review-set-badge, .review-set-row.scholar-set-row .scholar-set-badge, .review-set-row.scholar-set-row .review-set-badge { width: 52px !important; height: 52px !important; border-radius: 14px !important; } .scholar-set-row .scholar-set-badge i, .scholar-set-row .review-set-badge i, .review-set-row.scholar-set-row .scholar-set-badge i, .review-set-row.scholar-set-row .review-set-badge i { width: 26px !important; height: 26px !important; } .scholar-set-row h4, .scholar-set-row .set-card-title, .review-set-row.scholar-set-row h4, .review-set-row.scholar-set-row .set-card-title { font-size: 16px !important; font-weight: 700 !important; margin-bottom: 4px !important; } .scholar-set-row .review-set-meta, .review-set-row.scholar-set-row .review-set-meta { font-size: 13px !important; } body[data-theme="dark"] .set-card.scholar-set-row, body[data-theme="dark"] .set-card.scholar-set-row, body[data-theme="dark"] .review-set-row.scholar-set-row, body[data-theme="dark"] .review-set-row.scholar-set-row { background: #17181b !important; border-color: rgba(255,255,255,.06) !important; box-shadow: 0 8px 24px -10px rgba(0,0,0,.4) !important; } .set-card.scholar-set-row:active, .review-set-row.scholar-set-row:active { transform: scale(.97); } .scholar-set-main, .review-set-main { display: flex !important; align-items: center; gap: 16px !important; flex: 1; min-width: 0; } /* Colored icon tile */ .scholar-set-badge, .review-set-badge { width: 56px !important; height: 56px !important; border-radius: 16px !important; display: flex !important; align-items: center; justify-content: center; flex-shrink: 0; } .scholar-set-badge i, .review-set-badge i, .scholar-set-badge svg, .review-set-badge svg { width: 26px !important; height: 26px !important; stroke-width: 2 !important; } /* Tone variants, very soft pastel undertones (#ffedec level). Icon color is the bold accent that defines each tone. */ .scholar-set-badge--rose, body[data-scheme] .scholar-set-badge--rose, body[data-scheme="light"] .scholar-set-badge--rose { background: #ffedec !important; color: #c6283a !important; } body[data-scheme] .scholar-set-badge--rose i, body[data-scheme] .scholar-set-badge--rose svg, body[data-scheme="light"] .scholar-set-badge--rose i, body[data-scheme="light"] .scholar-set-badge--rose svg { color: #c6283a !important; stroke-width: 2.2 !important; } .scholar-set-badge--violet, body[data-scheme] .scholar-set-badge--violet, body[data-scheme="light"] .scholar-set-badge--violet { background: #f9ecff !important; color: #7a2ea8 !important; } body[data-scheme] .scholar-set-badge--violet i, body[data-scheme] .scholar-set-badge--violet svg, body[data-scheme="light"] .scholar-set-badge--violet i, body[data-scheme="light"] .scholar-set-badge--violet svg { color: #7a2ea8 !important; stroke-width: 2.2 !important; } .scholar-set-badge--coral, body[data-scheme] .scholar-set-badge--coral, body[data-scheme="light"] .scholar-set-badge--coral { background: #fff0e6 !important; color: #d46622 !important; } body[data-scheme] .scholar-set-badge--coral i, body[data-scheme] .scholar-set-badge--coral svg, body[data-scheme="light"] .scholar-set-badge--coral i, body[data-scheme="light"] .scholar-set-badge--coral svg { color: #d46622 !important; stroke-width: 2.2 !important; } .scholar-set-badge--amber, body[data-scheme] .scholar-set-badge--amber, body[data-scheme="light"] .scholar-set-badge--amber { background: #fff6e0 !important; color: #a15c00 !important; } body[data-scheme] .scholar-set-badge--amber i, body[data-scheme] .scholar-set-badge--amber svg, body[data-scheme="light"] .scholar-set-badge--amber i, body[data-scheme="light"] .scholar-set-badge--amber svg { color: #a15c00 !important; stroke-width: 2.2 !important; } .scholar-set-badge--stone, body[data-scheme] .scholar-set-badge--stone, body[data-scheme="light"] .scholar-set-badge--stone { background: #f4efe7 !important; color: #6b4a3a !important; } body[data-scheme] .scholar-set-badge--stone i, body[data-scheme] .scholar-set-badge--stone svg, body[data-scheme="light"] .scholar-set-badge--stone i, body[data-scheme="light"] .scholar-set-badge--stone svg { color: #6b4a3a !important; stroke-width: 2.2 !important; } /* Extra tones for more variety */ .scholar-set-badge--mint, body[data-scheme] .scholar-set-badge--mint, body[data-scheme="light"] .scholar-set-badge--mint { background: #e6faec !important; color: #0f7d45 !important; } body[data-scheme] .scholar-set-badge--mint i, body[data-scheme] .scholar-set-badge--mint svg, body[data-scheme="light"] .scholar-set-badge--mint i, body[data-scheme="light"] .scholar-set-badge--mint svg { color: #0f7d45 !important; stroke-width: 2.2 !important; } .scholar-set-badge--sky, body[data-scheme] .scholar-set-badge--sky, body[data-scheme="light"] .scholar-set-badge--sky { background: #e6f3ff !important; color: #1560b8 !important; } body[data-scheme] .scholar-set-badge--sky i, body[data-scheme] .scholar-set-badge--sky svg, body[data-scheme="light"] .scholar-set-badge--sky i, body[data-scheme="light"] .scholar-set-badge--sky svg { color: #1560b8 !important; stroke-width: 2.2 !important; } .scholar-set-badge--teal, body[data-scheme] .scholar-set-badge--teal, body[data-scheme="light"] .scholar-set-badge--teal { background: #e0f7f5 !important; color: #0d6e6a !important; } body[data-scheme] .scholar-set-badge--teal i, body[data-scheme] .scholar-set-badge--teal svg, body[data-scheme="light"] .scholar-set-badge--teal i, body[data-scheme="light"] .scholar-set-badge--teal svg { color: #0d6e6a !important; stroke-width: 2.2 !important; } .scholar-set-badge--lemon, body[data-scheme] .scholar-set-badge--lemon, body[data-scheme="light"] .scholar-set-badge--lemon { background: #fcfbd0 !important; color: #867200 !important; } body[data-scheme] .scholar-set-badge--lemon i, body[data-scheme] .scholar-set-badge--lemon svg, body[data-scheme="light"] .scholar-set-badge--lemon i, body[data-scheme="light"] .scholar-set-badge--lemon svg { color: #867200 !important; stroke-width: 2.2 !important; } /* Card copy */ .scholar-set-copy, .review-set-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .set-card-title { font-family: 'Manrope', 'Inter', sans-serif !important; font-size: 0.9375rem !important; font-weight: 700 !important; color: #2d2f31 !important; line-height: 1.35 !important; margin: 0 !important; text-transform: none !important; letter-spacing: -0.005em !important; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } body[data-theme="dark"] .set-card-title, body[data-theme="dark"] .set-card-title { color: #f4f4f5 !important; } .review-set-meta, .scholar-set-meta { display: flex !important; align-items: center; gap: 8px !important; font-size: 0.75rem !important; color: #5a5c5d !important; font-weight: 500 !important; margin-top: 4px !important; text-transform: none !important; letter-spacing: 0 !important; } body[data-theme="dark"] .review-set-meta, body[data-theme="dark"] .review-set-meta, body[data-theme="dark"] .scholar-set-meta, body[data-theme="dark"] .scholar-set-meta { color: #9ca0a6 !important; } .review-set-meta-dot { width: 3px !important; height: 3px !important; background: #acadaf !important; border-radius: 50% !important; display: inline-block !important; flex-shrink: 0; } /* Chevron on right, hide the ellipsis button, show chevron instead */ .review-set-actions { position: static !important; transform: none !important; display: flex; align-items: center; flex-shrink: 0; width: 24px; height: 24px; pointer-events: none; color: #c7c7cc; } /* Hide the ellipsis "more" button visually but keep it for long-press */ .scholar-set-menu, .review-set-action { display: none !important; } /* Inject a chevron via pseudo-element */ .review-set-actions::after { content: ""; width: 10px; height: 10px; border-right: 2px solid #c7c7cc; border-top: 2px solid #c7c7cc; transform: rotate(45deg); display: inline-block; margin-right: 4px; } body[data-theme="dark"] .review-set-actions::after, body[data-theme="dark"] .review-set-actions::after { border-color: #48484a; } /* Add bottom padding so content clears the floating nav */ .dashboard-main { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important; } /* Review has no floating Create button at the bottom (only Sets / Solve do). Drop the 120px clearance for Review's panel container so the page doesn't end with a giant white band below the action button. Note: ALSO duplicated outside this @media block below to cover desktop, where the same 120px rule still leaks through. */ #view-review .dashboard-main, #view-review #reviewContent { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important; } /* ── Solid white body bg on mobile ── Beats `body[data-scheme="light"] .study-layout { background: #fafafa }` at line ~2759 of this file. That rule is the actual source of the lavender-grey banner peeking through at the bottom of Study Sets / Review / Khio LM mobile views. We crank up specificity by stacking class + attribute on body so this override wins without touching the desktop rule. */ body.mobile-app[data-scheme="light"], body.mobile-app[data-scheme="light"] html, body.mobile-app[data-scheme="light"] .study-layout, body.mobile-app[data-scheme="light"] .study-main, body.mobile-app[data-scheme="light"] .study-view, body.mobile-app[data-scheme="light"] #view-sets, body.mobile-app[data-scheme="light"] #view-review, body.mobile-app[data-scheme="light"] #view-solve, body.mobile-app[data-scheme="light"] #view-klm, /* Sets view inner containers, these have their own #f6f6f8 bg at study-themes.css:735-741, so the override needs to cover them explicitly or the grey band peeks through below the cards on Study Sets specifically. Review/KLM don't use these, so this only fixes Sets. */ body.mobile-app[data-scheme="light"] .dashboard-layout, body.mobile-app[data-scheme="light"] .dashboard-main, body.mobile-app[data-scheme="light"] .app-layout, body.mobile-app[data-scheme="light"] .app-main { background: #ffffff !important; background-color: #ffffff !important; } } /* ── Desktop recent-sets row sizing ── James: "make recent sets twice as big length wise". The earlier bump in the @media (max-width:760px) block above fired only on mobile; this desktop variant sits OUTSIDE that block so it actually applies at ≥760px viewports. */ @media (min-width: 761px) { .set-card.scholar-set-row, .review-set-row.scholar-set-row { gap: 22px !important; padding: 26px 28px !important; min-height: 150px !important; border-radius: 22px !important; } .scholar-set-row .scholar-set-badge, .scholar-set-row .review-set-badge, .review-set-row.scholar-set-row .scholar-set-badge, .review-set-row.scholar-set-row .review-set-badge { width: 88px !important; height: 88px !important; border-radius: 22px !important; flex-shrink: 0; } .scholar-set-row .scholar-set-badge i, .scholar-set-row .review-set-badge i, .review-set-row.scholar-set-row .scholar-set-badge i, .review-set-row.scholar-set-row .review-set-badge i { width: 44px !important; height: 44px !important; } .scholar-set-row h4, .scholar-set-row .set-card-title, .review-set-row.scholar-set-row h4, .review-set-row.scholar-set-row .set-card-title { font-size: 19px !important; font-weight: 700 !important; margin-bottom: 6px !important; } .scholar-set-row .review-set-meta, .review-set-row.scholar-set-row .review-set-meta, .scholar-set-row .scholar-set-meta, .review-set-row.scholar-set-row .scholar-set-meta { font-size: 14px !important; } } /* ════ Side-drawer workspace menu (hamburger) ════ */ .mobile-workspace-menu-overlay { position: fixed; inset: 0; z-index: 10060; background: rgba(15, 23, 42, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); display: flex; align-items: stretch; justify-content: flex-start; transition: background .22s ease, backdrop-filter .22s ease; font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } .mobile-workspace-menu-overlay.mwm-open { background: rgba(15, 23, 42, 0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .mobile-workspace-drawer { width: min(320px, 86vw); height: 100%; background: #f6f6f8; border-top-right-radius: 28px; border-bottom-right-radius: 28px; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top, 0px) + 22px) 0 calc(env(safe-area-inset-bottom, 0px) + 20px); box-shadow: 0 32px 64px rgba(45, 47, 49, 0.22), 0 8px 20px rgba(0,0,0,.1); transform: translateX(-100%); transition: transform .28s cubic-bezier(.2,.9,.3,1); overflow-y: auto; -webkit-overflow-scrolling: touch; } .mobile-workspace-menu-overlay.mwm-open .mobile-workspace-drawer { transform: translateX(0); } /* Staggered entrance for drawer contents */ .mobile-workspace-drawer .mwd-header, .mobile-workspace-drawer .mwd-nav-item, .mobile-workspace-drawer .mwd-divider, .mobile-workspace-drawer .mwd-footer { opacity: 0; transform: translateX(-14px); } .mobile-workspace-menu-overlay.mwm-open .mwd-header { animation: mwd-slide-in 0.38s cubic-bezier(.2,.9,.3,1) 0.08s forwards; -webkit-animation: mwd-slide-in 0.38s cubic-bezier(.2,.9,.3,1) 0.08s forwards; } .mobile-workspace-menu-overlay.mwm-open .mwd-nav-item:nth-of-type(1) { animation: mwd-slide-in 0.38s cubic-bezier(.2,.9,.3,1) 0.14s forwards; -webkit-animation: mwd-slide-in 0.38s cubic-bezier(.2,.9,.3,1) 0.14s forwards; } .mobile-workspace-menu-overlay.mwm-open .mwd-nav-item:nth-of-type(2) { animation: mwd-slide-in 0.38s cubic-bezier(.2,.9,.3,1) 0.19s forwards; -webkit-animation: mwd-slide-in 0.38s cubic-bezier(.2,.9,.3,1) 0.19s forwards; } .mobile-workspace-menu-overlay.mwm-open .mwd-nav-item:nth-of-type(3) { animation: mwd-slide-in 0.38s cubic-bezier(.2,.9,.3,1) 0.24s forwards; -webkit-animation: mwd-slide-in 0.38s cubic-bezier(.2,.9,.3,1) 0.24s forwards; } .mobile-workspace-menu-overlay.mwm-open .mwd-nav-item:nth-of-type(4) { animation: mwd-slide-in 0.38s cubic-bezier(.2,.9,.3,1) 0.29s forwards; -webkit-animation: mwd-slide-in 0.38s cubic-bezier(.2,.9,.3,1) 0.29s forwards; } /* Settings button, the 5th .mwd-nav-item, sits after the divider. Was missing from the entrance animation, leaving it stuck at opacity:0 from the base rule above (so it rendered but was invisible, the source of the "Settings option never shows up under the line" report). */ .mobile-workspace-menu-overlay.mwm-open .mwd-nav-item:nth-of-type(5) { animation: mwd-slide-in 0.38s cubic-bezier(.2,.9,.3,1) 0.34s forwards; -webkit-animation: mwd-slide-in 0.38s cubic-bezier(.2,.9,.3,1) 0.34s forwards; } .mobile-workspace-menu-overlay.mwm-open .mwd-divider { animation: mwd-slide-in 0.38s cubic-bezier(.2,.9,.3,1) 0.32s forwards; -webkit-animation: mwd-slide-in 0.38s cubic-bezier(.2,.9,.3,1) 0.32s forwards; } .mobile-workspace-menu-overlay.mwm-open .mwd-footer { animation: mwd-slide-in 0.38s cubic-bezier(.2,.9,.3,1) 0.34s forwards; -webkit-animation: mwd-slide-in 0.38s cubic-bezier(.2,.9,.3,1) 0.34s forwards; } @keyframes mwd-slide-in { to { opacity: 1; transform: translateX(0); } } @-webkit-keyframes mwd-slide-in { to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .mobile-workspace-drawer .mwd-header, .mobile-workspace-drawer .mwd-nav-item, .mobile-workspace-drawer .mwd-divider, .mobile-workspace-drawer .mwd-footer { opacity: 1; transform: none; animation: none !important; -webkit-animation: none !important; } } body[data-theme="dark"] .mobile-workspace-drawer, body[data-theme="dark"] .mobile-workspace-drawer { background: #0f0f12; box-shadow: 0 32px 64px rgba(0, 0, 0, 0.55); } /* Header */ .mwd-header { padding: 0 24px 22px; position: relative; } .mwd-close { position: absolute; top: -6px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(15,23,42,.05); color: #2d2f31; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } body[data-theme="dark"] .mwd-close, body[data-theme="dark"] .mwd-close { background: rgba(255,255,255,.08); color: #f4f4f5; } .mwd-close i, .mwd-close svg { width: 18px; height: 18px; } .mwd-profile { display: flex; align-items: center; gap: 14px; margin-top: 6px; } .mwd-avatar { position: relative; width: 60px; height: 60px; border-radius: 18px; overflow: visible; flex-shrink: 0; } .mwd-avatar-img, .mwd-avatar-initial { width: 60px; height: 60px; border-radius: 18px; object-fit: cover; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ff7851, #e8853a, #ab2d00); color: #fff; font-weight: 800; font-size: 22px; box-shadow: 0 4px 12px rgba(171, 45, 0, .18); } .mwd-status-dot { position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; background: #22c55e; border-radius: 50%; border: 3px solid #f6f6f8; } body[data-theme="dark"] .mwd-status-dot, body[data-theme="dark"] .mwd-status-dot { border-color: #0f0f12; } .mwd-profile-meta h2 { font-size: 18px; font-weight: 800; color: #2d2f31; margin: 0 0 3px; letter-spacing: -0.01em; text-transform: none; } .mwd-profile-meta p { font-size: 12px; color: #5a5c5d; margin: 0; font-weight: 500; text-transform: none; letter-spacing: 0; } body[data-theme="dark"] .mwd-profile-meta h2, body[data-theme="dark"] .mwd-profile-meta h2 { color: #f4f4f5; } body[data-theme="dark"] .mwd-profile-meta p, body[data-theme="dark"] .mwd-profile-meta p { color: #9ca0a6; } /* Nav */ .mwd-nav { flex: 1; padding: 8px 14px; display: flex; flex-direction: column; gap: 4px; } .mwd-nav-item { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 14px; border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 500; color: #5a5c5d; text-align: left; text-transform: none; letter-spacing: 0; transition: background .15s, color .15s; } body[data-theme="dark"] .mwd-nav-item, body[data-theme="dark"] .mwd-nav-item { color: #a5a8ae; } .mwd-nav-item i, .mwd-nav-item svg { width: 22px; height: 22px; color: inherit; stroke-width: 2; flex-shrink: 0; } .mwd-nav-item:active { transform: scale(.97); } .mwd-nav-item--active { background: #ffffff; color: #ab2d00; font-weight: 700; box-shadow: 0 4px 10px rgba(45, 47, 49, 0.05); } body[data-theme="dark"] .mwd-nav-item--active, body[data-theme="dark"] .mwd-nav-item--active { background: #1c1c20; color: #ff7851; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45); } .mwd-nav-item:hover:not(.mwd-nav-item--active) { background: rgba(15,23,42,.04); } body[data-theme="dark"] .mwd-nav-item:hover:not(.mwd-nav-item--active), body[data-theme="dark"] .mwd-nav-item:hover:not(.mwd-nav-item--active) { background: rgba(255,255,255,.04); } .mwd-divider { height: 1px; background: rgba(15,23,42,.08); margin: 10px 20px; } body[data-theme="dark"] .mwd-divider, body[data-theme="dark"] .mwd-divider { background: rgba(255,255,255,.07); } /* Footer */ .mwd-footer { padding: 0 14px; } .mwd-logout { display: flex; align-items: center; gap: 16px; width: 100%; padding: 14px 18px; border-radius: 14px; border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 500; color: #5a5c5d; text-align: left; text-transform: none; letter-spacing: 0; transition: background .15s, color .15s; } body[data-theme="dark"] .mwd-logout, body[data-theme="dark"] .mwd-logout { color: #a5a8ae; } .mwd-logout i, .mwd-logout svg { width: 22px; height: 22px; stroke-width: 2; } .mwd-logout:hover { background: rgba(179, 27, 37, .06); color: #b31b25; } .mwd-brand { display: flex; align-items: center; gap: 8px; padding: 22px 20px 6px; } .mwd-brand-dot { width: 8px; height: 8px; border-radius: 50%; background: #ab2d00; } .mwd-brand-name { font-size: 14px; font-weight: 800; color: #ab2d00; letter-spacing: -.01em; } body[data-theme="dark"] .mwd-brand-name, body[data-theme="dark"] .mwd-brand-name { color: #ff7851; } body[data-theme="dark"] .mwd-brand-dot, body[data-theme="dark"] .mwd-brand-dot { background: #ff7851; } /* ════ Scholar Create bottom sheet ════ */ .scholar-create-sheet-overlay { position: fixed; inset: 0; z-index: 10080; background: rgba(15, 23, 42, 0); display: flex; align-items: flex-end; justify-content: center; padding: 0; transition: background .22s ease; font-family: 'Manrope', 'Inter', sans-serif; } .scholar-create-sheet-overlay.scs-open { background: rgba(15, 23, 42, 0.32); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .scholar-create-sheet { width: 100%; max-width: none; background: #ffffff; border-radius: 24px 24px 0 0; padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 16px); box-shadow: 0 -8px 32px rgba(45, 47, 49, 0.18); transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.9,.3,1); } .scholar-create-sheet-overlay.scs-open .scholar-create-sheet { transform: translateY(0); } body[data-theme="dark"] .scholar-create-sheet, body[data-theme="dark"] .scholar-create-sheet { background: #17181b; box-shadow: 0 32px 64px -15px rgba(0, 0, 0, 0.55); } .scs-handle-hit { display: flex; align-items: center; justify-content: center; padding: 10px 0 6px; margin: -8px -16px 0; touch-action: none; cursor: grab; } .scs-handle-hit:active { cursor: grabbing; } .scs-handle { width: 40px; height: 5px; border-radius: 999px; background: #e7e8ea; } body[data-theme="dark"] .scs-handle, body[data-theme="dark"] .scs-handle { background: #2c2c2e; } .scs-title { font-size: 22px; font-weight: 800; color: #2d2f31; text-align: center; margin: 14px 0 22px; letter-spacing: -0.01em; text-transform: none; } body[data-theme="dark"] .scs-title, body[data-theme="dark"] .scs-title { color: #f4f4f5; } .scs-list { display: flex; flex-direction: column; gap: 12px; } .scs-row { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 88px; padding: 18px 18px; border-radius: 18px; border: none; background: #f5f6f8; cursor: pointer; font-family: inherit; text-align: left; transition: transform .15s ease, background .18s ease; } body[data-theme="dark"] .scs-row { background: #1f2023; } .scs-row:active { transform: scale(.985); background: #ebecef; } body[data-theme="dark"] .scs-row:active { background: #26272a; } .scs-row-icon { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; background: rgba(255, 120, 81, 0.12); display: flex; align-items: center; justify-content: center; color: #ff7851; transition: background .18s ease; } body[data-theme="dark"] .scs-row-icon { background: rgba(255, 120, 81, 0.18); color: #ff7851; } .scs-row-icon i, .scs-row-icon svg { width: 26px; height: 26px; color: inherit; stroke-width: 2; } .scs-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .scs-row-title { font-size: 17px; font-weight: 800; color: #2d2f31; letter-spacing: -0.01em; line-height: 1.25; } body[data-theme="dark"] .scs-row-title { color: #f4f4f5; } .scs-row-sub { font-size: 13.5px; font-weight: 500; color: #6b7077; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body[data-theme="dark"] .scs-row-sub { color: #9ba0a8; } .scs-row-chev { flex: 0 0 auto; width: 20px; height: 20px; color: #b8bcc2; stroke-width: 2.4; } body[data-theme="dark"] .scs-row-chev { color: #5a5d63; } /* ══════ EDITORIAL REDESIGN, CookQuest Style ══════ */ /* Override base vars for editorial feel */ :root { --study-radius: 12px; --study-border: rgba(255,255,255,0.15); --study-border-light: rgba(255,255,255,0.3); } [data-theme="light"] { --study-border: rgba(15,23,42,0.12); --study-border-light: rgba(15,23,42,0.2); } /* ── Sidebar, editorial refinement ── */ .study-sidebar { background: #0a0a0a; border-right: none; } .sidebar-brand-text { font-weight: 900; text-transform: none; letter-spacing: normal; font-size: 17px; } .nav-link { border-radius: var(--study-radius); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; } .nav-link.active { background: var(--study-accent-dim); border-left: 3px solid var(--study-accent); } .method-nav { border-radius: var(--study-radius); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; } .method-nav.active { background: var(--study-accent-dim); border-left: 3px solid var(--study-accent); } /* ── Hero, editorial typography ── */ .hero-title { font-family: 'Ramillas', 'Playfair Display', Georgia, serif; font-weight: 400; text-transform: none; letter-spacing: -.01em; font-size: 64px; line-height: 1.05; } .hero-sub { font-weight: 500; text-transform: none; letter-spacing: normal; font-size: 22px; } /* ── Action Cards, clean card style ── */ .action-card { border: 1px solid var(--study-border); border-radius: var(--card-radius, 1.5rem); box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,0.06)); transition: all .2s ease; } .action-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover, 0 8px 24px rgba(0,0,0,0.08)); border-color: var(--study-accent); } .action-label { font-weight: 700; letter-spacing: .01em; font-size: 14px; } .action-sub { font-weight: 500; letter-spacing: .01em; } /* Desktop bumps these. Mobile keeps the base 14px so the previously mobile-friendly sizing isn't touched. */ @media (min-width: 761px) { .action-label { font-size: 18px; } .action-sub { font-size: 14px; } } /* ── Sets Header, editorial accent bar ── */ .sets-title-accent { width: 4px; height: 22px; border-radius: 0; } .sets-header h2 { font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: var(--study-text-tertiary); } .view-toggle-group { border-radius: var(--study-radius); border: 2px solid var(--study-border); background: transparent; } .view-toggle { border-radius: 2px; } .view-toggle.active { background: var(--study-accent); color: #000; } /* ── Set Cards, editorial card redesign ── */ .set-card { border: 1px solid var(--study-border); border-radius: var(--card-radius, 1.5rem); box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,0.06)); transition: all .2s ease; } .set-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover, 0 8px 24px rgba(0,0,0,0.08)); border-color: var(--study-accent); } .set-card-title { font-weight: 700; letter-spacing: .01em; font-size: 14px; } .mastery-bar { border-radius: 4px; height: 5px; } .mastery-bar .seg { border-radius: 4px; } .mastery-badge { border-radius: 2px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border: 1.5px solid currentColor; font-size: 10px; } .set-card-more { border: 2px solid var(--study-border); border-radius: var(--study-radius); } .set-card-dropdown { border: 2.5px solid var(--study-border); border-radius: var(--study-radius); box-shadow: 4px 4px 0 rgba(0,0,0,.3); } .set-card-dropdown button { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 12px; } /* ── Grid View Cards ── */ .sets-grid.grid-view .set-card { border-left: 2.5px solid var(--study-border); border-top: 5px solid var(--study-accent); box-shadow: 4px 4px 0 var(--study-accent-dim, rgba(0,0,0,0.3)); transition: all 0.15s; } .sets-grid.grid-view .set-card:hover { border-color: var(--study-accent); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(232,133,58,0.25); } /* Hide icons inside action buttons for clean text-only look */ .btn-create i, .btn-create svg, .btn-accent i, .btn-accent svg, .grade-analyze-btn i, .grade-analyze-btn svg { display: none !important; } /* ── Create Button, gradient style ── */ .btn-create { border-radius: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; border: none; } /* ── Modal, editorial style ── */ .modal { border: none; border-radius: 6px; box-shadow: 8px 8px 0 rgba(0,0,0,.3); } .modal-header h3 { font-weight: 900; text-transform: uppercase; letter-spacing: .03em; } /* ── Method Cards, editorial style ── */ .method-card { border: 2.5px solid var(--study-border); border-radius: var(--study-radius); box-shadow: 3px 3px 0 var(--study-accent-dim); } .method-card:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--study-accent-dim); } .method-card.selected { border-color: var(--study-accent); box-shadow: 4px 4px 0 rgba(232,133,58,.3); } .method-card-label { font-weight: 800; text-transform: uppercase; letter-spacing: .03em; } /* ── Wizard Button ── */ .btn-wizard { border-radius: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border: none; } /* ── Dropzone, editorial ── */ .dropzone { border: 2.5px dashed var(--study-border); border-radius: var(--study-radius); } .dropzone:hover, .dropzone.dragover { border-color: var(--study-accent); } .dropzone-title { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; } /* ── Flashcard, editorial ── */ .fc-card { border-radius: 6px; } .fc-face { border-radius: 6px; border: 2.5px solid var(--study-border); box-shadow: 6px 6px 0 var(--study-accent-dim); } .fc-back { border-color: rgba(232,133,58,.35); } body[data-theme="dark"] .fc-front { background: #1a1a1a; color: #e0e0e0; } body[data-theme="dark"] .fc-front .fc-text { color: #e0e0e0; } body[data-theme="dark"] .fc-front .fc-label { color: rgba(255,255,255,0.4); } body[data-theme="dark"] .fc-back { background: #1a1a1a; color: #e0e0e0; border-color: rgba(255,255,255,0.1); } body[data-theme="dark"] .fc-back .fc-text { color: #e0e0e0; } body[data-theme="dark"] .fc-back .fc-label { color: rgba(255,255,255,0.4); } body[data-theme="dark"] .fc-face { border-color: rgba(255,255,255,0.12); box-shadow: 6px 6px 0 rgba(255,255,255,0.04); } .fc-label { font-weight: 800; letter-spacing: .08em; } .fc-text { font-weight: 600; } .fc-btn { border-radius: var(--study-radius); font-weight: 800; letter-spacing: .04em; border: 2px solid currentColor; } /* ── Multiple Choice, editorial ── */ .mc-option { border-radius: var(--study-radius) !important; font-weight: 700 !important; border-width: 2px !important; transition: all .2s; } /* ── Written Test, editorial ── */ .wt-textarea { border-radius: var(--study-radius) !important; border: 2.5px solid var(--study-border) !important; } .wt-textarea:focus { border-color: var(--study-accent) !important; } /* ── Fill in Blanks ── */ .fib-input { border-radius: var(--study-radius) !important; border-width: 2.5px !important; font-weight: 700 !important; } /* ── Mastery Pills, editorial badges ── */ .mastery-pill { border-radius: 2px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-width: 1.5px; font-size: 11px; } /* ── Card Nav buttons ── */ .card-nav button { border-radius: var(--study-radius); border-width: 2px; } .card-nav-counter { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } /* ── Detail Topbar, editorial ── */ .detail-topbar { border-bottom: 1px solid var(--study-border); } .detail-topbar-title { font-weight: 900; text-transform: uppercase; letter-spacing: .03em; } .detail-topbar-right button { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; } /* ── Right Sidebar, editorial ── */ .right-sidebar { border-left: 2.5px solid var(--study-border) !important; } .right-tab { font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .04em !important; font-size: 11px !important; } .right-tab.active { border-bottom: 3px solid var(--study-accent) !important; } /* ── Token Badge, editorial ── */ .token-badge { border-radius: 2px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-width: 1.5px; } /* ── Mobile Nav, editorial ── */ .mobile-nav-btn { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } /* ── Notes View, editorial headings ── */ .notes-view h1, .notes-view h2, .notes-view h3 { letter-spacing: .01em; } /* ── Onboarding, editorial ── */ .onboard-logo { border-radius: 6px; } .onboard-title { font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; } .onboard-sub { font-weight: 600; letter-spacing: .02em; } .onboard-opt { border-radius: var(--study-radius); border-width: 2.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; box-shadow: 3px 3px 0 var(--study-accent-dim); } .onboard-opt:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--study-accent-dim); } .onboard-opt.selected { border-color: var(--study-accent); box-shadow: 4px 4px 0 rgba(232,133,58,.3); } .onboard-continue { border-radius: var(--study-radius); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border: 2.5px solid #000; } /* ── Solve/Grade views, editorial ── */ .solve-heading, .grade-heading { font-weight: 900 !important; text-transform: uppercase; letter-spacing: .02em; } /* ═══ Light Mode editorial overrides ═══ */ [data-theme="light"] .set-card { background: var(--bg-card, #fff); box-shadow: var(--shadow-card); } [data-theme="light"] .set-card:hover { box-shadow: var(--shadow-card-hover); } [data-theme="light"] .action-card { background: var(--bg-card, #fff); box-shadow: var(--shadow-card); color: var(--text-primary); } [data-theme="light"] .action-card:hover { box-shadow: var(--shadow-card-hover); } [data-theme="light"] .action-card i { color: var(--accent-amber); } [data-theme="light"] .action-label { color: var(--text-primary); } [data-theme="light"] .action-sub { color: var(--text-tertiary); } [data-theme="light"] .fc-face { background: #fff; box-shadow: 6px 6px 0 rgba(15,23,42,.08); } [data-theme="light"] .modal { background: #fff; box-shadow: 8px 8px 0 rgba(0,0,0,.1); } [data-theme="light"] .method-card { background: #fff; box-shadow: 3px 3px 0 rgba(15,23,42,.08); } [data-theme="light"] .year-option { box-shadow: 3px 3px 0 rgba(15,23,42,.08); } /* --- Study detail refresh: theme-driven palette --- */ /* === Study detail refresh: theme-driven palette aligned with Settings themes === */ body[data-scheme] .study-layout.detail-active { --study-accent: var(--accent-amber); --study-accent-hover: var(--accent-orange); --study-accent-dim: var(--glow-amber); background: var(--bg-base); } body[data-scheme] .study-layout.detail-active .detail-topbar, body[data-scheme] .study-layout.detail-active .detail-main, body[data-scheme] .study-layout.detail-active .detail-right { background: var(--bg-raised); border-color: var(--border-default); } body[data-scheme] .study-layout.detail-active .detail-topbar { background: color-mix(in srgb, var(--bg-base) 84%, var(--bg-elevated) 16%); border-bottom-color: transparent; box-shadow: none; } body[data-scheme] .study-layout.detail-active .detail-layout, body[data-scheme] .study-layout.detail-active .study-main, body[data-scheme] .study-layout.notes-active .detail-main, body[data-scheme] .study-layout.course-active .detail-main { background: var(--bg-base); } body[data-scheme] .study-layout.detail-active .detail-layout { gap: 0; } body[data-scheme] .study-layout.detail-active .study-sidebar { background: color-mix(in srgb, var(--bg-base) 70%, var(--bg-elevated) 30%); border-right: none !important; box-shadow: none; } body[data-scheme] .study-layout.detail-active .detail-main { background: var(--bg-base); border: none; border-radius: 0; box-shadow: none; } body[data-scheme] .study-layout.detail-active .detail-topbar-title, body[data-scheme] .study-layout.detail-active .module-inline-title { color: var(--text-primary); } body[data-scheme] .study-layout.detail-active .detail-topbar-right, body[data-scheme] .study-layout.detail-active .module-inline-kicker, body[data-scheme] .study-layout.detail-active .module-progress, body[data-scheme] .study-layout.detail-active .module-nav-title, body[data-scheme] .study-layout.detail-active #navDetail .method-nav { color: var(--text-secondary); } body[data-scheme] .study-layout.detail-active .detail-group-heading, body[data-scheme] .study-layout.detail-active .method-nav-group-label { color: color-mix(in srgb, var(--text-secondary) 78%, var(--accent-amber) 22%); } /* .module-nav-num color now owned by study-core.css (#2c1e18 by default, #a85025 on hover, #7f3818 on active). Legacy color-mix rule removed 2026-05-12. */ body[data-scheme] .study-layout.detail-active .module-nav-kicker, body[data-scheme] .study-layout.detail-active .module-nav-check { color: var(--text-tertiary); } /* .module-nav-item shape (padding/gap/border-radius/hover/active) is owned by study-core.css's connected-chart design, square rows with inset hairlines. Do NOT add padding/gap/border-radius/background overrides here. James 2026-05-12. */ body[data-scheme] .study-layout.detail-active #navDetail .method-nav { border: 1px solid transparent; } body[data-scheme] .study-layout.detail-active .detail-group-heading, body[data-scheme] .study-layout.detail-active .method-nav-group-label { letter-spacing: 0.14em; } body[data-scheme] .study-layout.detail-active .method-nav-group-sep, body[data-scheme] .study-layout.detail-active .detail-sidebar-bottom { border-top: none; } body[data-scheme] .study-layout.detail-active #navDetail .method-nav:hover { background: var(--bg-elevated); } body[data-scheme] .study-layout.detail-active #navDetail .method-nav.active { background: var(--bg-elevated); border-color: var(--border-default); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05); } body[data-scheme] .study-layout.detail-active .detail-add-method-btn, body[data-scheme] .study-layout.detail-active #topbarChatToggle, body[data-scheme] .study-layout.detail-active .detail-sidebar-back { background: var(--bg-elevated) !important; border-color: transparent !important; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04); } body[data-scheme] .study-layout.detail-active .detail-add-method-btn:hover, body[data-scheme] .study-layout.detail-active #topbarChatToggle:hover, body[data-scheme] .study-layout.detail-active .detail-sidebar-back:hover { background: var(--bg-raised) !important; } body[data-scheme] .study-layout.detail-active:not(.notes-active):not(.course-active) .detail-main { background: transparent; border: none; border-radius: 0; box-shadow: none; } body[data-scheme] .study-layout.detail-active:not(.notes-active):not(.course-active) .detail-main-inner { padding: 22px 26px 30px; } .sg2-hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sg2-main-solo { width: 100%; } .sg2-next-card, .sg2-priority-card, .sg2-current-card { border-radius: 24px; background: var(--bg-raised); border: 1px solid var(--border-default); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05); } .sg2-phase-card, .sg2-side-card { border-color: var(--border-default); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05); } body[data-scheme] .study-layout.detail-active:not(.notes-active):not(.course-active) .sg2-next-card, body[data-scheme] .study-layout.detail-active:not(.notes-active):not(.course-active) .sg2-current-card, body[data-scheme] .study-layout.detail-active:not(.notes-active):not(.course-active) .sg2-phase-card, body[data-scheme] .study-layout.detail-active:not(.notes-active):not(.course-active) .sg2-side-card { background: var(--bg-base); box-shadow: none; } .sg2-step-instruction { background: color-mix(in srgb, var(--bg-elevated) 92%, var(--glow-amber)); border-left: 3px solid var(--border-default); color: var(--text-secondary); font-style: italic; } .sg2-step-instruction span { display: none; } .sg2-btn-primary { color: #111827; background: color-mix(in srgb, var(--accent-amber) 76%, #cb8c52); border: 2px solid #111827; box-shadow: 3px 3px 0 rgba(17,24,39,.24); } .sg2-btn-primary:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 rgba(17,24,39,.28); } .sg2-btn-secondary { background: var(--bg-base); color: var(--text-primary); border: 1px solid var(--border-default); box-shadow: none; } .sg2-btn-secondary:hover { background: var(--bg-elevated); } .sg2-phase-summary-actions .sg2-phase-tool { white-space: nowrap; } .sg2-step-action { border-color: var(--border-default); background: var(--bg-elevated); color: var(--text-primary); } .sg2-phase-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-subtle); } .sg2-phase-tool { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border-radius: 12px; border: none; background: color-mix(in srgb, var(--bg-elevated) 94%, var(--bg-raised)); color: var(--text-primary); font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit; transition: transform 0.15s, box-shadow 0.15s, background 0.15s; box-shadow: none; min-height: 46px; } .sg2-phase-tool:hover { background: color-mix(in srgb, var(--bg-raised) 96%, var(--bg-base)); } .sg2-phase-tool.is-primary { background: color-mix(in srgb, var(--accent-amber) 78%, #a96038); color: #fff; box-shadow: 0 10px 22px rgba(163, 96, 56, 0.18); } .sg2-phase-tool.is-primary:hover { background: color-mix(in srgb, var(--accent-amber) 84%, #b16a43); } .sg2-phase-tool.is-secondary { background: color-mix(in srgb, var(--bg-elevated) 94%, var(--bg-raised)); color: var(--text-primary); box-shadow: none; } .sg2-phase-tool.is-secondary:hover { background: color-mix(in srgb, var(--bg-raised) 96%, var(--bg-base)); } .sg2-phase-tool i { width: 14px; height: 14px; } .sg2-phase-tool.is-generating { opacity: 0.9; cursor: wait; } .sg2-phase-tool-spinner { width: 14px; height: 14px; border: 2px solid rgba(148, 163, 184, 0.28); border-top-color: var(--study-accent); border-radius: 999px; -webkit-animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite; flex-shrink: 0; } .sg-scope-bar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; padding: 10px 14px; border: 1.5px solid var(--border-default); border-radius: 14px; background: var(--bg-raised); box-shadow: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.4); } .sg-scope-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sg-scope-title { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-amber); padding: 3px 10px; border-radius: 6px; background: color-mix(in srgb, var(--accent-amber) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent-amber) 20%, transparent); } .sg-scope-subtitle { display: none; } .sg-scope-count { font-size: 11px; font-weight: 800; color: var(--text-secondary); white-space: nowrap; letter-spacing: 0.02em; } .sg-scope-chip-row { display: flex; flex-wrap: wrap; gap: 6px; } .sg-scope-chip { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 10px; border: 1.5px solid var(--border-default); background: var(--bg-elevated); color: var(--text-primary); font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.15s; box-shadow: 2px 2px 0 rgba(0,0,0,0.08); } .sg-scope-chip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--study-accent-dim, rgba(232,133,58,0.15)); border-color: color-mix(in srgb, var(--accent-amber) 40%, var(--border-default)); } .sg-scope-chip.active { border-color: var(--accent-amber); background: color-mix(in srgb, var(--accent-amber) 12%, transparent); color: var(--accent-orange); font-weight: 800; box-shadow: 2px 2px 0 rgba(232,133,58,0.2), inset 0 1px 0 rgba(255,255,255,0.3); } .sg2-tool-card { background: var(--bg-raised); border-color: var(--border-default); } .sg2-tool-card:hover { border-color: color-mix(in srgb, var(--accent-amber) 44%, var(--border-default)); box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06); } .sg2-side-title, .sg2-section-title, .sg2-next-title, .sg2-ready-score { color: #111827; } .sg2-title { color: var(--text-primary); } .sg2-priority-title { color: var(--text-primary); } .sg2-subtitle, .sg2-next-detail, .sg2-next-reason, .sg2-priority-detail, .sg2-priority-reason, .sg2-side-item-detail, .sg2-ready-copy { color: var(--text-secondary); } .sg2-priority-reason { color: var(--text-tertiary); } /* Course Overview banner, uniform warm off-white palette regardless of the data-scheme subject. The per-subject hero-start/mid/end vars are intentionally ignored so every notebook reads the same. James 2026-05-12 v13. */ .module-hero { background: linear-gradient(135deg, #faf4ee 0%, #fcf8f3 100%) !important; box-shadow: 0 14px 30px rgba(168, 80, 37, 0.06) !important; } .module-hero-kicker { color: #a85025 !important; } .module-hero-badge-subject { background: rgba(168, 80, 37, 0.14) !important; color: #7f3818 !important; } .module-hero-badge-source-youtube { background: rgba(168, 80, 37, 0.10) !important; color: #7f3818 !important; } .module-hero-badge-source-file { background: rgba(168, 80, 37, 0.10) !important; color: #7f3818 !important; } .module-hero-title, .module-inline-title { font-family: 'Inika', 'Georgia', 'Times New Roman', serif; } .module-hero-title { color: #2c1e18 !important; } .module-hero-art { width: min(100%, 470px); max-width: 470px; aspect-ratio: 1.7 / 1; max-height: 296px; padding: 10px; border-radius: 28px; background: rgba(255, 255, 255, 0.55) !important; } .module-hero-art-fallback { display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(168, 80, 37, 0.10), 0 14px 30px rgba(168, 80, 37, 0.12) !important; } .module-hero-fallback-img { width: min(100%, 430px); height: auto; max-height: 100%; object-fit: contain; filter: drop-shadow(0 18px 28px rgba(15, 23, 42, 0.2)); } .module-hero-img { border-radius: 22px; } .module-hero-art-placeholder::before { inset: 20px 24px auto auto; width: 124px; height: 124px; background: radial-gradient(circle at 30% 30%, rgba(253, 224, 71, 0.92), rgba(251, 146, 60, 0.18)); } .module-hero-art-glow { inset: auto auto 26px 26px; width: 122px; height: 122px; background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(96, 165, 250, 0.12)); box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.14); } .module-hero-art-bars { right: 28px; bottom: 30px; width: 142px; height: 88px; } .module-inline-num { background: var(--study-hero-end); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16); } .module-inline-title { color: #0f172a; } .module-inline-kicker { color: #64748b; } .module-footer-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .module-footer-nav > :first-child { justify-self: start; } .module-footer-nav > :nth-child(2) { justify-self: center; } .module-footer-nav > :last-child { justify-self: end; } .module-footer-btn-primary { background: #0f172a; box-shadow: 0 14px 26px rgba(15, 23, 42, 0.18); } .module-footer-btn-primary.is-complete { background: #1d4ed8; } /* Step card backgrounds now defined in study-guide.css with soft tints + accent bars */ .notes-step-grid, .notes-step-stack { margin: 30px 0 40px; } .notes-step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .notes-step-grid-card { padding: 22px 20px; border-radius: 22px; background: var(--study-bg-secondary); border: 1px solid var(--study-border); box-shadow: 0 16px 34px rgba(15, 23, 42, 0.05); } .notes-step-grid-num { width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; background: var(--study-accent-dim, #eff6ff); color: var(--study-accent, #2563eb); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; } .notes-step-grid-copy, .notes-step-grid-copy p, .notes-step-grid-copy li { color: var(--study-text, #334155); font-size: 15px; line-height: 1.72; } .notes-step-stack { display: flex; flex-direction: column; gap: 12px; } .notes-step-stack-item { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 18px 20px; border-radius: 20px; background: var(--study-bg-secondary); border: 1px solid var(--study-border); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05); } .notes-step-stack-num { width: 34px; height: 34px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--study-accent-dim, #fff7ed); color: var(--study-accent, #c2410c); font-size: 14px; font-weight: 800; } .notes-step-stack-copy, .notes-step-stack-copy p, .notes-step-stack-copy li { color: var(--study-text, #334155); font-size: 15px; line-height: 1.72; } @media (max-width: 768px) { .module-footer-nav { grid-template-columns: 1fr; } .module-footer-nav > * { width: 100%; justify-self: stretch; justify-content: center; } .sg2-hero-actions { flex-direction: column; align-items: stretch; } .notes-step-grid { grid-template-columns: 1fr; } } /* ── Focus task input placeholder ── */ #focusTaskInput::placeholder { color:#fff !important; opacity:0.8 !important; text-shadow:0 1px 3px rgba(0,0,0,0.6) !important; } /* ── Onboarding method cards ── */ .ob2-method-card:hover { border-color:#cfd7e2; transform:translateY(-1px); box-shadow:0 8px 20px rgba(31,41,55,0.07); } .ob2-method-card.selected { border-color:#b95424 !important; background:linear-gradient(180deg,#fffaf6 0%,#fff4ec 100%) !important; box-shadow:0 0 0 3px rgba(185,84,36,0.11),0 10px 24px rgba(185,84,36,0.10) !important; } /* ── Onboarding demo ── */ @keyframes ob2DemoPulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.04);opacity:0.85;} } #ob2DemoResult::-webkit-scrollbar { width:4px; } #ob2DemoResult::-webkit-scrollbar-track { background:transparent; } #ob2DemoResult::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.1);border-radius:99px; } /* ── Driver.js tour theme ── */ .driver-popover { animation:none!important; -webkit-font-smoothing:auto!important; -moz-osx-font-smoothing:auto!important; } .khio-tour-popover.driver-popover { background:var(--study-card-bg,#fff); color:var(--study-text,#1a1a1a); border-radius:16px; padding:24px; box-shadow:0 4px 12px rgba(0,0,0,0.1); border:1px solid var(--study-border,#e5e5e5); font-family:'Inter',sans-serif; max-width:340px; } .khio-tour-popover .driver-popover-title { font-size:18px; font-weight:700; margin-bottom:8px; color:var(--study-text,#1a1a1a); text-shadow:0 0 0 var(--study-text,#1a1a1a); } .khio-tour-popover .driver-popover-description { font-size:14.5px; line-height:1.6; color:var(--study-text-secondary,#555); font-weight:450; } .khio-tour-popover .driver-popover-progress-text { font-size:12px; color:var(--study-text-tertiary,#888); font-weight:500; } .khio-tour-popover .driver-popover-navigation-btns button { border-radius:10px; padding:8px 18px; font-size:13.5px; font-weight:700; font-family:'Inter',sans-serif; border:none; cursor:pointer; letter-spacing:0.01em; } .khio-tour-popover .driver-popover-next-btn, .khio-tour-popover .driver-popover-done-btn { background:var(--study-accent,#8B6914)!important; color:#fff!important; text-shadow:0 1px 1px rgba(0,0,0,0.25); } .khio-tour-popover .driver-popover-next-btn:hover, .khio-tour-popover .driver-popover-done-btn:hover { background:var(--study-accent,#8B6914)!important; color:#fff!important; opacity:.85; } .khio-tour-popover .driver-popover-prev-btn { background:var(--study-bg-secondary,#f5f5f5)!important; color:var(--study-text,#1a1a1a)!important; } .khio-tour-popover .driver-popover-prev-btn:hover { background:var(--study-bg-secondary,#e8e8e8)!important; color:var(--study-text,#1a1a1a)!important; } .khio-tour-popover .driver-popover-close-btn { color:var(--study-text-tertiary,#999); } /* ═══ MOBILE: FLASHCARD SWIPE GESTURES ═══ */ @media (max-width: 760px) { .fc-card-wrap { touch-action: pan-y; } .fc-card-wrap.fc-swiping { transition: none !important; } .fc-card-wrap.fc-swiping-right { background: color-mix(in srgb, var(--study-green) 8%, transparent); border-radius: var(--study-radius); } .fc-card-wrap.fc-swiping-left { background: color-mix(in srgb, var(--study-red) 8%, transparent); border-radius: var(--study-radius); } .fc-swipe-label { position: absolute; top: 16px; z-index: 10; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 14px; border-radius: 8px; pointer-events: none; opacity: 0; transition: opacity 0.15s; } .fc-swipe-label.fc-swipe-label-right { right: 16px; color: var(--study-green); border: 2px solid var(--study-green); } .fc-swipe-label.fc-swipe-label-left { left: 16px; color: var(--study-red); border: 2px solid var(--study-red); } .fc-card-wrap.fc-swiping-right .fc-swipe-label-right { opacity: 1; } .fc-card-wrap.fc-swiping-left .fc-swipe-label-left { opacity: 1; } .fc-card-wrap.fc-snap-back { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1) !important; } .fc-card-wrap.fc-snap-away { transition: transform 0.3s ease-out, opacity 0.3s ease-out !important; opacity: 0; } } /* Hide mobile collection chrome on desktop only */ @media (min-width: 761px) { .mobile-greeting, .mobile-collection-bar, .mobile-collection-icon, .mobile-collection-search, #btnClearSetFilters, #gradeRecentSection .sets-search-wrap { display: none !important; } } /* Mobile collection chrome + recorder overrides */ .mobile-collection-profile { width: 52px; height: 52px; border-radius: 50%; border: none; background: transparent; padding: 2px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; overflow: hidden; box-shadow: 0 0 0 2px #000; } .mobile-collection-avatar { width: 100%; height: 100%; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: #fff; background: color-mix(in srgb, var(--study-accent) 70%, #0f172a); } .mobile-collection-avatar-image { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .mobile-collection-copy { min-width: 0; flex: 1; } .mobile-collection-title { font-size: 20px; font-weight: 800; letter-spacing: -0.04em; color: var(--study-text); line-height: 1.05; } .mobile-collection-subtitle { font-size: 12px; color: var(--study-text-tertiary); margin-top: 3px; } .mobile-collection-actions { display: inline-flex; align-items: center; gap: 8px; } .mobile-collection-icon { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.08); background: transparent; color: var(--study-text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all .15s ease; } .mobile-collection-icon:hover { border-color: color-mix(in srgb, var(--study-accent) 30%, var(--study-border)); color: var(--study-accent); } .mobile-collection-icon i { width: 18px; height: 18px; } .mobile-collection-search { transition: all .18s ease; } .mobile-folder-sheet-overlay { position: fixed; inset: 0; z-index: 10070; display: flex; align-items: flex-end; justify-content: center; padding: 16px 16px calc(92px + env(safe-area-inset-bottom, 0px)); background: rgba(15,23,42,0.34); backdrop-filter: blur(6px); } .mobile-folder-sheet { width: min(420px, 100%); border-radius: 26px; background: var(--study-bg-secondary, #fff); border: 1px solid color-mix(in srgb, var(--study-border) 85%, transparent); box-shadow: 0 24px 64px rgba(15,23,42,0.22); padding: 16px; display: flex; flex-direction: column; gap: 10px; } .mobile-folder-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 8px; } .mobile-folder-sheet-head strong { font-size: 16px; color: var(--study-text); } .mobile-folder-sheet-close { width: 34px; height: 34px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--study-border) 80%, transparent); background: var(--study-bg); color: var(--study-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; } .mobile-folder-sheet-option { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--study-border) 78%, transparent); background: var(--study-bg); color: var(--study-text); cursor: pointer; font-family: inherit; text-align: left; } .mobile-folder-sheet-option.is-active { border-color: color-mix(in srgb, var(--study-accent) 42%, var(--study-border)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--study-accent) 20%, transparent); } .mobile-folder-sheet-option-copy { display: flex; align-items: center; gap: 12px; min-width: 0; } .mobile-folder-sheet-option-copy i { width: 18px; height: 18px; color: var(--study-text-secondary); } .mobile-folder-sheet-option-copy strong { display: block; font-size: 15px; color: var(--study-text); } .mobile-folder-sheet-option-copy span { display: block; font-size: 12px; color: var(--study-text-secondary); margin-top: 3px; } .mobile-folder-sheet-count { font-size: 12px; font-weight: 700; color: var(--study-text-tertiary); flex-shrink: 0; } .mobile-folder-sheet-empty { padding: 14px 6px 4px; text-align: center; color: var(--study-text-tertiary); font-size: 13px; } .mobile-folder-sheet-create { margin-top: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--study-border) 78%, transparent); background: transparent; color: var(--study-text); font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; } .mobile-empty-prompt { text-align: center; margin: 28px 18px 24px !important; padding: 42px 22px 38px !important; border-radius: 28px; background: #f7ddd6; border: none; box-shadow: none; } .mobile-empty-prompt h3 { font-size: 28px; line-height: 1.12; font-weight: 900; letter-spacing: 0; color: #000; margin: 0 0 18px; } .mobile-empty-prompt p { display: block !important; max-width: 320px; margin: 0 auto 30px; color: #6b5d59; font-size: 20px; line-height: 1.35; } /* Get Started button: same orange gradient as the .mobile-dashboard-create pill so the empty-state CTA matches the rest of the app. The [data-theme="light"] .btn-create rule earlier in this file uses !important on background/color/border/box-shadow, so this rule HAS to use !important on every property it overrides, otherwise the empty-state button comes out gray with a slate-blue label, which is what James reported as "GET STARTED looks bad". */ .mobile-empty-prompt .btn-create, .mobile-empty-prompt .mobile-empty-prompt-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; min-width: 172px; padding: 16px 26px !important; border-radius: 18px !important; border: 1px solid rgba(255, 120, 81, 0.25) !important; background: linear-gradient(135deg, #ff7851 0%, #e8853a 55%, #ab2d00 100%) !important; color: #fff !important; font-size: 20px; font-weight: 700; text-decoration: none; cursor: pointer; font-family: inherit; box-shadow: 0 12px 28px rgba(232, 90, 12, 0.32), 0 4px 10px rgba(232, 90, 12, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 4px rgba(0, 0, 0, 0.15) !important; transition: transform .15s ease; } .mobile-empty-prompt .btn-create:active, .mobile-empty-prompt .mobile-empty-prompt-btn:active { transform: scale(.97); } /* Block the light-theme `[data-theme="light"] .btn-create:hover` rule earlier in this file (which uses !important on background + box-shadow to paint the button gray) from winning after an iOS tap. Mobile webviews leave :hover active until the user taps elsewhere, so without this override the button reads as "stuck pressed" (washed-out gray with faded text) the moment the user hits the free limit. -webkit-tap-highlight-color kills the iOS gray flash on tap-start as well. */ .mobile-empty-prompt .btn-create, .mobile-empty-prompt .mobile-empty-prompt-btn { -webkit-tap-highlight-color: transparent; } .mobile-empty-prompt .btn-create:hover, .mobile-empty-prompt .mobile-empty-prompt-btn:hover { background: linear-gradient(135deg, #ff7851 0%, #e8853a 55%, #ab2d00 100%) !important; color: #fff !important; box-shadow: 0 12px 28px rgba(232, 90, 12, 0.32), 0 4px 10px rgba(232, 90, 12, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 4px rgba(0, 0, 0, 0.15) !important; transform: none !important; } .mobile-empty-prompt .btn-create:focus, .mobile-empty-prompt .mobile-empty-prompt-btn:focus { outline: none; } .mobile-empty-prompt .btn-create i, .mobile-empty-prompt .mobile-empty-prompt-btn i { width: 22px; height: 22px; stroke-width: 2.8; color: #fff !important; } /* Hide the storage / set-count usage bar entirely on Review / Sets / Khio LM empty states. James: "why is there 0/25 sets at the bottom of review even tho no set has been added", until the user actually has content, the count is just noise. These selectors are prefixed with body[data-scheme] so they win specificity against the base mobile show-rule `body[data-scheme] #studyUsageBar.study-usage-bar { display: flex }` in study-mobile.css. Without the prefix the show-rule wins (both !important, but show-rule has higher specificity) and the bar leaks through. */ body[data-scheme] #view-sets.is-empty-scroll-lock #studyUsageBar.study-usage-bar, body[data-scheme] #view-review.is-empty-scroll-lock #studyUsageBar.study-usage-bar, body[data-scheme] #view-review.is-empty-scroll-lock .study-usage-bar, body[data-scheme] #view-solve.is-empty-scroll-lock #klmMobileHeader .study-usage-bar, /* Hide the moved-to-bottom #klmUsageBar pill ("0/1 notebooks · 0 KB/50 MB") on Khio LM when the picker has no notebooks yet. moveMobileCtaToBottom relocates the usage bar out of klmMobileHeader and inserts it after the empty CTA card, so the rule above doesn't catch it. */ body[data-scheme] #view-solve.is-empty-scroll-lock #klmUsageBar.study-usage-bar, /* Plain selectors as a fallback when data-scheme isn't set yet (e.g. very early boot before themeRenderer has run). */ #view-sets.is-empty-scroll-lock #studyUsageBar, #view-review.is-empty-scroll-lock .study-usage-bar, #view-solve.is-empty-scroll-lock #klmUsageBar { display: none !important; } .lecture-recorder { z-index: 10080; background: rgba(0,0,0,0.78); padding: 24px; backdrop-filter: blur(12px); } .lr-sheet { width: min(92vw, 640px); background: #171717; border: 1px solid rgba(255,255,255,0.08); border-radius: 28px; box-shadow: 0 32px 80px rgba(0,0,0,0.42); padding: 18px 20px 20px; display: flex; flex-direction: column; } .lr-sheet-handle { width: 56px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.16); margin: 0 auto 14px; } .lr-brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; font-weight: 800; letter-spacing: 0.02em; color: #ff6a22; margin-bottom: 18px; } .lr-brand-icon { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; object-fit: cover; } .lr-brand span { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -0.02em; } .lr-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 4px 18px; } .lr-indicator { justify-content: flex-start; margin-bottom: 0; } .lr-timer { font-size: 36px; letter-spacing: -0.04em; margin-top: 0; } .lr-captions-wrap { width: 100%; min-height: 280px; max-height: 44vh; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); border-radius: 22px; margin-bottom: 18px; } /* Desktop waveform, flex row, fixed height. Without this, the 60 dot divs block-stack at full width, showing as a giant gray rectangle whose height jitters on every animation frame (the "tremor"). */ .lr-waveform { display: flex; align-items: center; justify-content: center; gap: 2px; height: 40px; margin: 0 0 18px; overflow: hidden; contain: layout paint; } .lr-waveform-dot { width: 3px; border-radius: 99px; background: rgba(255,255,255,0.15); min-height: 4px; flex: 0 0 3px; will-change: height; } .lr-btn { padding: 14px 30px; border-radius: 18px; font-weight: 700; justify-content: center; font-family: inherit; } .lr-btn i { width: 18px; height: 18px; } .lr-controls { justify-content: center; } .lr-link-cancel { margin: 14px auto 0; background: transparent; border: none; color: rgba(255,255,255,0.55); cursor: pointer; font-size: 14px; font-weight: 600; font-family: inherit; transition: color .15s ease; } .lr-link-cancel:hover { color: rgba(255,255,255,0.9); } .lr-processing { align-items: center; justify-content: center; } /* ═══ MOBILE PAYWALL ═══ */ /* ═══ Mobile Paywall, cream / light "Upgrade to study 10x faster" ═══ */ .mobile-paywall { position: fixed; inset: 0; z-index: 99999; background: #fcf6ef; color: #0a0a0a; display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mobile-paywall-inner { flex: 1; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top, 0px) + 14px) 22px calc(env(safe-area-inset-bottom, 0px) + 20px); max-width: 480px; margin: 0 auto; width: 100%; box-sizing: border-box; } /* Topbar: back chevron, progress bar, X close */ .mobile-paywall-topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; } .mobile-paywall-topbtn { width: 38px; height: 38px; border-radius: 50%; border: none; background: #fff; color: #0a0a0a; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.04); padding: 0; } .mobile-paywall-topbtn:active { transform: scale(0.94); } .mobile-paywall-progress { flex: 1; height: 6px; border-radius: 999px; background: #ececec; overflow: hidden; } .mobile-paywall-progress-fill { width: 62%; height: 100%; background: linear-gradient(90deg, #e8853a, #f5a623); border-radius: 999px; } /* Brand row */ .mobile-paywall-brandrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .mobile-paywall-brand-logo { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; } .mobile-paywall-brand-fallback { font-size: 24px; font-weight: 900; color: #e8853a; } .mobile-paywall-brand { font-size: 13px; font-weight: 800; color: #4b5563; letter-spacing: 0.14em; text-transform: uppercase; } /* Title + subtitle */ .mobile-paywall-title { font-size: 40px; font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; color: #0a0a0a; margin: 0 0 12px; text-align: left; } .mobile-paywall-title-accent { color: #e8853a; display: block; } .mobile-paywall-subtitle { font-size: 16px; color: rgba(15,23,42,0.55); line-height: 1.4; margin: 0 0 22px; text-align: left; } /* Feature cards */ .mobile-paywall-features { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-bottom: 22px; } .mobile-paywall-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid rgba(0,0,0,0.05); border-radius: 18px; box-shadow: 0 1px 3px rgba(0,0,0,0.03); } .mobile-paywall-card-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(232,133,58,0.12); } .mobile-paywall-card-body { flex: 1; min-width: 0; } .mobile-paywall-card-title { font-size: 16px; font-weight: 800; color: #0a0a0a; margin-bottom: 2px; letter-spacing: -0.01em; } .mobile-paywall-card-desc { font-size: 13px; color: rgba(15,23,42,0.55); line-height: 1.35; } .mobile-paywall-card-check { width: 26px; height: 26px; border-radius: 50%; background: rgba(232,133,58,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Pricing tiles, side-by-side */ .mobile-paywall-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin: 8px 0 14px; } .mobile-paywall-plan { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 22px 18px 44px; border-radius: 18px; border: 2px solid rgba(0,0,0,0.06); background: #fff; cursor: pointer; transition: all 0.18s ease; text-align: left; font-family: inherit; -webkit-tap-highlight-color: transparent; } .mobile-paywall-plan.selected { border-color: #e8853a; background: #fff; box-shadow: 0 4px 14px rgba(232,133,58,0.1); } .mobile-paywall-plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: #fff; background: #e8853a; padding: 5px 11px; border-radius: 999px; white-space: nowrap; } .mobile-paywall-plan-label { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: #e8853a; margin-bottom: 4px; } .mobile-paywall-plan:not(.selected) .mobile-paywall-plan-label { color: rgba(15,23,42,0.55); } .mobile-paywall-plan-amount { font-size: 30px; font-weight: 900; letter-spacing: -0.02em; color: #0a0a0a; line-height: 1; margin-bottom: 6px; } .mobile-paywall-plan-sub { font-size: 13px; color: rgba(15,23,42,0.55); margin-bottom: 10px; } .mobile-paywall-plan-save { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(34,197,94,0.14); color: #16a34a; font-size: 11px; font-weight: 800; letter-spacing: 0.03em; } .mobile-paywall-plan-trial { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(15,23,42,0.07); color: rgba(15,23,42,0.6); font-size: 11px; font-weight: 700; } .mobile-paywall-plan-check { position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; background: #e8853a; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(232,133,58,0.3); } .mobile-paywall-plan-check-empty { background: #fff; border: 2px solid rgba(0,0,0,0.12); box-shadow: none; } .mobile-paywall-plan:not(.selected) .mobile-paywall-plan-check { background: #fff; border: 2px solid rgba(0,0,0,0.12); box-shadow: none; } .mobile-paywall-plan:not(.selected) .mobile-paywall-plan-check svg { display: none; } /* No-payment trust + CTA */ .mobile-paywall-trust { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; color: #16a34a; font-weight: 700; margin: 18px 0 12px; } .mobile-paywall-cta { width: 100%; padding: 18px 24px; border: none; border-radius: 18px; background: #e8853a; color: #fff; font-size: 17px; font-weight: 800; cursor: pointer; font-family: inherit; box-shadow: 0 8px 22px rgba(232,133,58,0.32); transition: all 0.18s ease; display: inline-flex; align-items: center; justify-content: center; gap: 10px; letter-spacing: 0.005em; } .mobile-paywall-cta:hover { background: #f0923f; box-shadow: 0 10px 26px rgba(232,133,58,0.38); } .mobile-paywall-cta:active { transform: scale(0.985); box-shadow: 0 4px 14px rgba(232,133,58,0.28); } .mobile-paywall-cta svg { flex-shrink: 0; } /* Footer row (Cancel anytime | Restore Purchases) */ .mobile-paywall-footer { display: flex; align-items: center; justify-content: space-around; margin-top: 18px; padding: 0 6px; } .mobile-paywall-footer span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: rgba(15,23,42,0.55); cursor: pointer; } .mobile-paywall-footer span:hover { color: rgba(15,23,42,0.85); } .mobile-paywall-footer-divider { width: 1px; height: 18px; background: rgba(0,0,0,0.12); cursor: default !important; } /* Bottom footnote (Secure payments • Cancel anytime) */ .mobile-paywall-footnote { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: rgba(15,23,42,0.42); font-weight: 500; } .mobile-paywall-footnote-dot { opacity: 0.6; } /* ═══ SAFE AREA (works for both Capacitor app and iOS Safari standalone) ═══ */ @supports(padding-top: env(safe-area-inset-top)) { .detail-topbar { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); } .sets-fab { bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px); } } /* Review Session (Active Recall setup, Tutor setup, etc.) and KLM detail views need safe-area-top on Capacitor / iOS so the iOS status bar does NOT overlap the Back button + method tabs. Only applies on mobile sized viewports so desktop is untouched. IMPORTANT: for #view-klm/#view-solve we scope to .klm-notebook-open because in picker-mode the inner .mobile-dashboard-header already adds its own calc(env(safe-area-inset-top) + 10px) padding-top , double-counting the safe-area here made KLM's picker look ~44px taller than Sets/Review on notched iPhones. */ @media (max-width: 768px) { @supports(padding-top: env(safe-area-inset-top)) { /* #reviewSession's safe-area-top padding was DOUBLE-PAYING: body.capacitor-app .study-main already pads env(safe-area-inset-top) above us, so adding it again here stacked two ~50px insets and produced a ~100px white gap above the chip bar on notched iPhones. Drop the duplicate; KLM picker carve-out unchanged. */ body.capacitor-app .study-layout.klm-notebook-open #view-klm, body.mobile-app .study-layout.klm-notebook-open #view-klm, body.capacitor-app .study-layout.klm-notebook-open #view-solve, body.mobile-app .study-layout.klm-notebook-open #view-solve { padding-top: env(safe-area-inset-top, 0px) !important; } } } /* Force-hide duplicate detail chrome in the mobile app detail view. */ body.mobile-app.in-detail .mobile-nav, body.mobile-app.in-detail #mobileNav, body.mobile-app.in-detail #mobileNav .mobile-nav-inner, body.capacitor-app.in-detail .mobile-nav, body.capacitor-app.in-detail #mobileNav, body.capacitor-app.in-detail #mobileNav .mobile-nav-inner { display: none !important; visibility: hidden !important; pointer-events: none !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; overflow: hidden !important; } body.mobile-app.in-detail #detailTopbar, body.mobile-app.in-detail #detailTopbar.visible, body.capacitor-app.in-detail #detailTopbar, body.capacitor-app.in-detail #detailTopbar.visible { display: none !important; visibility: hidden !important; pointer-events: none !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; overflow: hidden !important; } body.mobile-app.in-detail .study-main, body.capacitor-app.in-detail .study-main { /* No safe-area padding here, the first child in detail view (.mobile-method-nav.detail-active) already adds it. Stacking both creates a ~2× safe-area gap above the back button. */ padding-top: 0 !important; padding-bottom: 0 !important; } body.mobile-app.in-detail .study-view, body.capacitor-app.in-detail .study-view, body.mobile-app.in-detail #view-detail, body.capacitor-app.in-detail #view-detail, body.mobile-app.in-detail .detail-layout, body.capacitor-app.in-detail .detail-layout { padding-bottom: 0 !important; margin-bottom: 0 !important; } body.mobile-app.in-detail .detail-main-inner, body.capacitor-app.in-detail .detail-main-inner, body.mobile-app.in-detail .detail-main-inner.mode-reading, body.capacitor-app.in-detail .detail-main-inner.mode-reading { padding-bottom: 0 !important; } /* ════════════════════════════════════════════════════════════════ ▓▓▓ FOCUSED SCHOLAR, DESKTOP "LIGHT" THEME ▓▓▓ Applies the mobile Focused Scholar look to the full desktop study app when body[data-scheme="light"]. Scoped OUTSIDE the @media(max-width:760px) block so it affects desktop widths. ════════════════════════════════════════════════════════════════ */ body[data-scheme="light"] { --bg-base: #fafafa !important; --bg-raised: #ffffff !important; --bg-elevated: #ffffff !important; --bg-hover: #f0f1f3 !important; --bg-card: #ffffff !important; --border-subtle: rgba(15,23,42,.06) !important; --border-default: rgba(15,23,42,.1) !important; --border-strong: rgba(15,23,42,.16) !important; --text-primary: #2d2f31 !important; --text-secondary: rgba(45,47,49,.72) !important; --text-tertiary: rgba(45,47,49,.5) !important; --text-muted: rgba(45,47,49,.35) !important; --study-accent: #ab2d00 !important; --study-accent-hover: #ff7851 !important; --study-accent-dim: rgba(171,45,0,.1) !important; --study-text: #2d2f31 !important; --study-text-secondary: rgba(45,47,49,.72) !important; --study-text-tertiary: rgba(45,47,49,.5) !important; --study-bg: #fafafa !important; --study-bg-secondary: #ffffff !important; --study-border: rgba(15,23,42,.08) !important; } body[data-scheme="light"] html, body[data-scheme="light"], body[data-scheme="light"] .study-layout, body[data-scheme="light"] .study-main { background: #fafafa !important; font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; } /* ── Sidebar: clean white rail ── */ body[data-scheme="light"] .study-sidebar { background: #ffffff !important; border-right: 1px solid rgba(15,23,42,.06) !important; box-shadow: 0 1px 3px rgba(45,47,49,.02); } body[data-scheme="light"] .sidebar-brand-text { color: #2d2f31 !important; font-weight: 800; text-transform: none; letter-spacing: -0.01em; } body[data-scheme="light"] .nav-link { color: rgba(45,47,49,.72) !important; border-radius: 14px !important; border-left: none !important; font-weight: 600; text-transform: none !important; letter-spacing: 0 !important; padding: 10px 14px; transition: all .15s ease; } body[data-scheme="light"] .nav-link:hover { background: rgba(15,23,42,.04) !important; color: #2d2f31 !important; } body[data-scheme="light"] .nav-link.active { background: rgba(171,45,0,.08) !important; color: #ab2d00 !important; border-left: none !important; font-weight: 700; } body[data-scheme="light"] .nav-link.active i, body[data-scheme="light"] .nav-link.active svg { color: #ab2d00 !important; } /* ── Hero section ── */ body[data-scheme="light"] .hero-title { color: #2d2f31 !important; font-family: 'Ramillas', 'Playfair Display', Georgia, serif !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: -0.01em !important; } body[data-scheme="light"] .hero-sub { color: rgba(45,47,49,.65) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; } /* ── Action cards (Upload / Paste / Record / Blank Document) ── */ body[data-scheme="light"] .action-card { background: #ffffff !important; border: 1px solid rgba(15,23,42,.06) !important; border-radius: 20px !important; box-shadow: 0 8px 24px -10px rgba(45,47,49,.08) !important; transition: transform .15s ease, box-shadow .2s ease !important; } body[data-scheme="light"] .action-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -10px rgba(45,47,49,.12) !important; border-color: rgba(15,23,42,.1) !important; } body[data-scheme="light"] .action-label { color: #2d2f31 !important; font-family: 'Manrope', 'Inter', sans-serif !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; } body[data-scheme="light"] .action-sub { color: rgba(45,47,49,.5) !important; font-weight: 500 !important; } /* ── "Your Recent Sets" heading ── */ body[data-scheme="light"] .sets-heading, body[data-scheme="light"] .sets-section h2 { color: #2d2f31 !important; font-family: 'Manrope', 'Inter', sans-serif !important; font-weight: 800 !important; text-transform: none !important; letter-spacing: -0.02em !important; } /* ── Set cards (desktop) ── */ body[data-scheme="light"] .set-card, body[data-scheme="light"] .review-set-row, body[data-scheme="light"] .scholar-set-row { background: #ffffff !important; border: 1px solid rgba(15,23,42,.04) !important; border-radius: 22px !important; box-shadow: 0 8px 24px -12px rgba(45,47,49,.08) !important; transition: transform .15s ease, box-shadow .2s ease !important; } body[data-scheme="light"] .set-card:hover, body[data-scheme="light"] .review-set-row:hover, body[data-scheme="light"] .scholar-set-row:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -12px rgba(45,47,49,.14) !important; } body[data-scheme="light"] .set-card-title, body[data-scheme="light"] .set-card h4, body[data-scheme="light"] .review-set-info h4 { color: #2d2f31 !important; font-family: 'Manrope', 'Inter', sans-serif !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: -0.005em !important; } body[data-scheme="light"] .review-set-meta, body[data-scheme="light"] .set-card-meta, body[data-scheme="light"] .scholar-set-meta { color: rgba(45,47,49,.5) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; } /* Desktop tone badges use the same soft pastels as mobile */ body[data-scheme="light"] .scholar-set-badge--rose { background: #ffedec !important; color: #c6283a !important; } body[data-scheme="light"] .scholar-set-badge--rose i, body[data-scheme="light"] .scholar-set-badge--rose svg { color: #c6283a !important; } body[data-scheme="light"] .scholar-set-badge--violet { background: #f9ecff !important; color: #7a2ea8 !important; } body[data-scheme="light"] .scholar-set-badge--violet i, body[data-scheme="light"] .scholar-set-badge--violet svg { color: #7a2ea8 !important; } body[data-scheme="light"] .scholar-set-badge--coral { background: #fff0e6 !important; color: #d46622 !important; } body[data-scheme="light"] .scholar-set-badge--coral i, body[data-scheme="light"] .scholar-set-badge--coral svg { color: #d46622 !important; } body[data-scheme="light"] .scholar-set-badge--amber { background: #fff6e0 !important; color: #a15c00 !important; } body[data-scheme="light"] .scholar-set-badge--amber i, body[data-scheme="light"] .scholar-set-badge--amber svg { color: #a15c00 !important; } body[data-scheme="light"] .scholar-set-badge--stone { background: #f4efe7 !important; color: #6b4a3a !important; } body[data-scheme="light"] .scholar-set-badge--stone i, body[data-scheme="light"] .scholar-set-badge--stone svg { color: #6b4a3a !important; } body[data-scheme="light"] .scholar-set-badge--mint { background: #e6faec !important; color: #0f7d45 !important; } body[data-scheme="light"] .scholar-set-badge--mint i, body[data-scheme="light"] .scholar-set-badge--mint svg { color: #0f7d45 !important; } body[data-scheme="light"] .scholar-set-badge--sky { background: #e6f3ff !important; color: #1560b8 !important; } body[data-scheme="light"] .scholar-set-badge--sky i, body[data-scheme="light"] .scholar-set-badge--sky svg { color: #1560b8 !important; } body[data-scheme="light"] .scholar-set-badge--teal { background: #e0f7f5 !important; color: #0d6e6a !important; } body[data-scheme="light"] .scholar-set-badge--teal i, body[data-scheme="light"] .scholar-set-badge--teal svg { color: #0d6e6a !important; } body[data-scheme="light"] .scholar-set-badge--lemon { background: #fcfbd0 !important; color: #867200 !important; } body[data-scheme="light"] .scholar-set-badge--lemon i, body[data-scheme="light"] .scholar-set-badge--lemon svg { color: #867200 !important; } /* ── Method icons: match page bg, not white ── */ body[data-scheme="light"] .method-icon-sm { background: #fafafa !important; } /* ── Filter buttons (Recent / Filter / New Folder) ── */ body[data-scheme="light"] .hero-filter-btn, body[data-scheme="light"] .folder-create-btn { background: #ffffff !important; color: rgba(45,47,49,.72) !important; border: 1px solid rgba(15,23,42,.08) !important; border-radius: 14px !important; box-shadow: 0 2px 6px rgba(45,47,49,.04) !important; font-family: 'Manrope', 'Inter', sans-serif !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; } body[data-scheme="light"] .hero-filter-btn.active { background: #ab2d00 !important; color: #ffffff !important; border-color: #ab2d00 !important; box-shadow: 0 6px 16px rgba(171,45,0,.22) !important; } /* ── Primary buttons (sitewide) ── */ body[data-scheme="light"] .btn-primary, body[data-scheme="light"] .btn-accent { background: linear-gradient(135deg, #ff7851 0%, #e8853a 50%, #ab2d00 100%) !important; color: #ffffff !important; border: none !important; border-radius: 14px !important; font-family: 'Manrope', 'Inter', sans-serif !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: -0.01em !important; box-shadow: 0 10px 24px rgba(232,90,12,.24), 0 2px 8px rgba(232,90,12,.14) !important; } body[data-scheme="light"] .btn-ghost { background: transparent !important; color: rgba(45,47,49,.72) !important; border: 1px solid rgba(15,23,42,.08) !important; border-radius: 14px !important; font-family: 'Manrope', 'Inter', sans-serif !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; } body[data-scheme="light"] .btn-ghost:hover { background: rgba(15,23,42,.04) !important; border-color: rgba(15,23,42,.14) !important; } /* ── Cards everywhere (modals, settings, panels) ── */ body[data-scheme="light"] .card { background: #ffffff !important; border: 1px solid rgba(15,23,42,.06) !important; border-radius: 22px !important; box-shadow: 0 8px 24px -10px rgba(45,47,49,.06) !important; } body[data-scheme="light"] .card-title { color: #2d2f31 !important; font-family: 'Manrope', 'Inter', sans-serif !important; font-weight: 800 !important; text-transform: none !important; letter-spacing: -0.01em !important; } /* ── Inputs ── */ /* Khio AI / Co-Writer inputs are excluded, they paint themselves transparent so the parent bubble's white shows through. James 2026-05-07. */ body[data-scheme="light"] .input:not(.dt2-gd-ai-input):not(.dt2-gd-title-input), body[data-scheme="light"] input[type="text"]:not(.dt2-gd-ai-input):not(.dt2-gd-title-input):not(.dt2-chathero-input):not(.dt2-input), body[data-scheme="light"] input[type="email"]:not(.dt2-gd-ai-input):not(.dt2-gd-title-input), body[data-scheme="light"] input[type="search"]:not(.dt2-gd-ai-input):not(.dt2-gd-title-input), body[data-scheme="light"] textarea:not(.klm-input-card textarea):not(.dt2-input):not(.dt2-chathero-input) { background: #f6f6f8 !important; border: 1px solid rgba(15,23,42,.08) !important; border-radius: 14px !important; color: #2d2f31 !important; font-family: 'Manrope', 'Inter', sans-serif !important; } body[data-scheme="light"] .klm-input-card textarea { background: transparent !important; border: none !important; border-radius: 0 !important; font-family: inherit !important; } body[data-scheme="light"] input:not(.dt2-chathero-input):not(.dt2-input):not(.dt2-gd-title-input):not(.dt2-gd-ai-input):focus, body[data-scheme="light"] textarea:not(.klm-input-card textarea):not(.dt2-input):not(.dt2-chathero-input):focus { border-color: rgba(171,45,0,.35) !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(171,45,0,.08) !important; } /* Khio AI composer textareas/inputs and Co-Writer title/AI input sit inside their own pill wraps that already paint focus state. The global focus ring above was double-painting and showing a faint orange box around them. James 2026-05-07. */ body[data-scheme="light"] .dt2-input:focus, body[data-scheme="light"] .dt2-chathero-input:focus, body[data-scheme="light"] .dt2-gd-title-input:focus, body[data-scheme="light"] .dt2-gd-ai-input:focus { border-color: transparent !important; background: transparent !important; box-shadow: none !important; outline: none !important; } /* ── Modals ── */ body[data-scheme="light"] .modal, body[data-scheme="light"] .modal-box { background: #ffffff !important; border: 1px solid rgba(15,23,42,.06) !important; border-radius: 24px !important; box-shadow: 0 32px 64px -18px rgba(45,47,49,.18) !important; } body[data-scheme="light"] .modal-title { color: #2d2f31 !important; font-family: 'Manrope', 'Inter', sans-serif !important; font-weight: 800 !important; text-transform: none !important; letter-spacing: -0.02em !important; } /* Kill the legacy editorial 3D-shadow look on the light theme */ body[data-scheme="light"] .card { border-width: 1px !important; border-radius: 22px !important; } body[data-scheme="light"] .btn-primary, body[data-scheme="light"] .btn-accent, body[data-scheme="light"] .btn-ghost { border-width: 1px !important; } body[data-scheme="light"] .sets-header h2, body[data-scheme="light"] .token-badge, body[data-scheme="light"] .modal-title, body[data-scheme="light"] .form-label, body[data-scheme="light"] label { font-family: 'Manrope', 'Inter', sans-serif !important; } /* Hero title uses Ramillas serif for the editorial look */ body[data-scheme="light"] .hero-title, body[data-theme="dark"] .hero-title, body[data-theme="dark"] .hero-title { font-family: 'Ramillas', 'Playfair Display', Georgia, serif !important; font-weight: 400 !important; letter-spacing: -0.01em !important; } /* ════════════════════════════════════════════════════ Study set card, colored left border, gym-card style. Uses :has() to pick up the tone class from the badge so the accent matches the subject color automatically. ──────────────────────────────────────────────────── */ body[data-scheme="light"] .set-card.scholar-set-row, body[data-scheme="light"] .review-set-row.scholar-set-row, body[data-theme="dark"] .set-card.scholar-set-row, body[data-theme="dark"] .review-set-row.scholar-set-row, body[data-theme="dark"] .set-card.scholar-set-row, body[data-theme="dark"] .review-set-row.scholar-set-row { position: relative !important; border-left-width: 3px !important; border-left-style: solid !important; border-left-color: #c7c7cc !important; } /* Tone-specific left-border colors (match the badge accent) */ body[data-scheme="light"] .set-card.scholar-set-row:has(.scholar-set-badge--rose), body[data-scheme="light"] .review-set-row.scholar-set-row:has(.scholar-set-badge--rose), body[data-theme="dark"] .set-card.scholar-set-row:has(.scholar-set-badge--rose), body[data-theme="dark"] .review-set-row.scholar-set-row:has(.scholar-set-badge--rose), body[data-theme="dark"] .set-card.scholar-set-row:has(.scholar-set-badge--rose), body[data-theme="dark"] .review-set-row.scholar-set-row:has(.scholar-set-badge--rose) { border-left-color: #c6283a !important; } body[data-scheme="light"] .set-card.scholar-set-row:has(.scholar-set-badge--violet), body[data-scheme="light"] .review-set-row.scholar-set-row:has(.scholar-set-badge--violet), body[data-theme="dark"] .set-card.scholar-set-row:has(.scholar-set-badge--violet), body[data-theme="dark"] .review-set-row.scholar-set-row:has(.scholar-set-badge--violet), body[data-theme="dark"] .set-card.scholar-set-row:has(.scholar-set-badge--violet), body[data-theme="dark"] .review-set-row.scholar-set-row:has(.scholar-set-badge--violet) { border-left-color: #7a2ea8 !important; } body[data-scheme="light"] .set-card.scholar-set-row:has(.scholar-set-badge--coral), body[data-scheme="light"] .review-set-row.scholar-set-row:has(.scholar-set-badge--coral), body[data-theme="dark"] .set-card.scholar-set-row:has(.scholar-set-badge--coral), body[data-theme="dark"] .review-set-row.scholar-set-row:has(.scholar-set-badge--coral), body[data-theme="dark"] .set-card.scholar-set-row:has(.scholar-set-badge--coral), body[data-theme="dark"] .review-set-row.scholar-set-row:has(.scholar-set-badge--coral) { border-left-color: #d46622 !important; } body[data-scheme="light"] .set-card.scholar-set-row:has(.scholar-set-badge--amber), body[data-scheme="light"] .review-set-row.scholar-set-row:has(.scholar-set-badge--amber), body[data-theme="dark"] .set-card.scholar-set-row:has(.scholar-set-badge--amber), body[data-theme="dark"] .review-set-row.scholar-set-row:has(.scholar-set-badge--amber), body[data-theme="dark"] .set-card.scholar-set-row:has(.scholar-set-badge--amber), body[data-theme="dark"] .review-set-row.scholar-set-row:has(.scholar-set-badge--amber) { border-left-color: #c97a00 !important; } body[data-scheme="light"] .set-card.scholar-set-row:has(.scholar-set-badge--stone), body[data-scheme="light"] .review-set-row.scholar-set-row:has(.scholar-set-badge--stone), body[data-theme="dark"] .set-card.scholar-set-row:has(.scholar-set-badge--stone), body[data-theme="dark"] .review-set-row.scholar-set-row:has(.scholar-set-badge--stone), body[data-theme="dark"] .set-card.scholar-set-row:has(.scholar-set-badge--stone), body[data-theme="dark"] .review-set-row.scholar-set-row:has(.scholar-set-badge--stone) { border-left-color: #6b4a3a !important; } body[data-scheme="light"] .set-card.scholar-set-row:has(.scholar-set-badge--mint), body[data-scheme="light"] .review-set-row.scholar-set-row:has(.scholar-set-badge--mint), body[data-theme="dark"] .set-card.scholar-set-row:has(.scholar-set-badge--mint), body[data-theme="dark"] .review-set-row.scholar-set-row:has(.scholar-set-badge--mint), body[data-theme="dark"] .set-card.scholar-set-row:has(.scholar-set-badge--mint), body[data-theme="dark"] .review-set-row.scholar-set-row:has(.scholar-set-badge--mint) { border-left-color: #0f7d45 !important; } body[data-scheme="light"] .set-card.scholar-set-row:has(.scholar-set-badge--sky), body[data-scheme="light"] .review-set-row.scholar-set-row:has(.scholar-set-badge--sky), body[data-theme="dark"] .set-card.scholar-set-row:has(.scholar-set-badge--sky), body[data-theme="dark"] .review-set-row.scholar-set-row:has(.scholar-set-badge--sky), body[data-theme="dark"] .set-card.scholar-set-row:has(.scholar-set-badge--sky), body[data-theme="dark"] .review-set-row.scholar-set-row:has(.scholar-set-badge--sky) { border-left-color: #1560b8 !important; } body[data-scheme="light"] .set-card.scholar-set-row:has(.scholar-set-badge--teal), body[data-scheme="light"] .review-set-row.scholar-set-row:has(.scholar-set-badge--teal), body[data-theme="dark"] .set-card.scholar-set-row:has(.scholar-set-badge--teal), body[data-theme="dark"] .review-set-row.scholar-set-row:has(.scholar-set-badge--teal), body[data-theme="dark"] .set-card.scholar-set-row:has(.scholar-set-badge--teal), body[data-theme="dark"] .review-set-row.scholar-set-row:has(.scholar-set-badge--teal) { border-left-color: #0d6e6a !important; } body[data-scheme="light"] .set-card.scholar-set-row:has(.scholar-set-badge--lemon), body[data-scheme="light"] .review-set-row.scholar-set-row:has(.scholar-set-badge--lemon), body[data-theme="dark"] .set-card.scholar-set-row:has(.scholar-set-badge--lemon), body[data-theme="dark"] .review-set-row.scholar-set-row:has(.scholar-set-badge--lemon), body[data-theme="dark"] .set-card.scholar-set-row:has(.scholar-set-badge--lemon), body[data-theme="dark"] .review-set-row.scholar-set-row:has(.scholar-set-badge--lemon) { border-left-color: #b39400 !important; } /* ════════════════════════════════════════════════════════════ DESKTOP LIGHT THEME REDESIGN, James 2026-05-05 ──────────────────────────────────────────────────────────── Scoped to non-touch viewports ≥1200px so iPad portrait (≤1199 + touch) and mobile keep their existing treatments. Targets: white page bg, bigger square action cards with soft 3D shadow, full-width rounded set rows with tinted icon tiles, accent-filled "Recent" pill + outlined "Filter" pill, polished "New Folder" outline button. ════════════════════════════════════════════════════════════ */ /* iPad-safe desktop scope. James 2026-05-05. Originally (min-width:1200px) and (hover:hover), but iPad with Magic Keyboard reports hover:hover, AND iPad Pro 12.9" lands at exactly 1366px in landscape, both meant the 72px hero, 340-wide cards, and 1456-wide rows blew up the iPad layout. body.khio-desktop excludes iPad/touch devices; pointer:fine plus the JS guard keeps the desktop shell off tablets. */ @media (min-width: 1024px) and (hover: hover) and (pointer: fine) { /* Page background → pure white. Re-scoped to light schemes only after James reported the dark schemes inheriting a white canvas when the redesign rules were unscoped. Dark schemes keep their own scheme-defined background (set in the body[data-scheme="dark|...]"]` rules near line 1199). James 2026-05-12. */ body.khio-desktop:is([data-scheme="light"], [data-scheme="paper"], [data-scheme="mono_light"], [data-scheme="khio_light"], [data-scheme="codex"]), body.khio-desktop:is([data-scheme="light"], [data-scheme="paper"], [data-scheme="mono_light"], [data-scheme="khio_light"], [data-scheme="codex"]) .study-layout, body.khio-desktop:is([data-scheme="light"], [data-scheme="paper"], [data-scheme="mono_light"], [data-scheme="khio_light"], [data-scheme="codex"]) .app-layout, body.khio-desktop:is([data-scheme="light"], [data-scheme="paper"], [data-scheme="mono_light"], [data-scheme="khio_light"], [data-scheme="codex"]) .study-main, body.khio-desktop:is([data-scheme="light"], [data-scheme="paper"], [data-scheme="mono_light"], [data-scheme="khio_light"], [data-scheme="codex"]) .app-main, body.khio-desktop:is([data-scheme="light"], [data-scheme="paper"], [data-scheme="mono_light"], [data-scheme="khio_light"], [data-scheme="codex"]):not([data-nav-transparent]) .app-main, html body.khio-desktop[data-scheme="light"] { background: #ffffff !important; } body.khio-desktop:is([data-scheme="light"], [data-scheme="paper"], [data-scheme="mono_light"], [data-scheme="khio_light"], [data-scheme="codex"]) #view-sets, body.khio-desktop:is([data-scheme="light"], [data-scheme="paper"], [data-scheme="mono_light"], [data-scheme="khio_light"], [data-scheme="codex"]) #view-review, body.khio-desktop:is([data-scheme="light"], [data-scheme="paper"], [data-scheme="mono_light"], [data-scheme="khio_light"], [data-scheme="codex"]) #view-solve { background: #ffffff !important; } /* Detail view, pure white in light/paper themes so the panel matches every other view. Earlier #eef2f6 was an attempt to hide the floating-pill clearance strip but James asked for white everywhere. James 2026-05-06. */ body.khio-desktop:is([data-scheme="light"], [data-scheme="paper"], [data-scheme="mono_light"], [data-scheme="khio_light"], [data-scheme="codex"]) .study-layout.detail-active, body.khio-desktop:is([data-scheme="light"], [data-scheme="paper"], [data-scheme="mono_light"], [data-scheme="khio_light"], [data-scheme="codex"]) .study-layout.detail-active .study-main { background: #ffffff !important; } /* Paper theme override, the picker labels light scheme as "Paper" and James wants its bg to actually look paper-y (slightly off-white) on every page so it visually matches what the Settings page already shows. Cards/panels stay #ffffff so there's still visual layering against the bg. James 2026-05-06. */ body.khio-desktop[data-scheme="light"], body.khio-desktop[data-scheme="light"] .study-layout, body.khio-desktop[data-scheme="light"] .study-main, body.khio-desktop[data-scheme="light"] #view-sets, body.khio-desktop[data-scheme="light"] #view-review, body.khio-desktop[data-scheme="light"] #view-solve, body.khio-desktop[data-scheme="light"] .study-layout.detail-active, body.khio-desktop[data-scheme="light"] .study-layout.detail-active .study-main { background: #fafafa !important; } /* ── Hero filter pills (top right of dashboard), bigger ── */ body.khio-desktop .hero-filter-btn { padding: 13px 22px !important; border-radius: 999px !important; border: 1px solid rgba(15,23,42,0.1) !important; background: #ffffff !important; color: rgba(15,23,42,0.72) !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important; transition: all 0.15s !important; } body.khio-desktop .hero-filter-btn i { width: 16px !important; height: 16px !important; } body.khio-desktop .hero-filter-btn:hover { border-color: rgba(15,23,42,0.16) !important; background: #fafafa !important; } body.khio-desktop .hero-filter-btn.active { background: var(--study-accent, #c17a4e) !important; background-image: linear-gradient(135deg, var(--study-accent, #c17a4e) 0%, color-mix(in srgb, var(--study-accent, #c17a4e) 80%, #ff7841) 100%) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 4px 12px rgba(193,122,78,0.32) !important; } body.khio-desktop .hero-filter-btn.active i { color: #fff !important; } /* ── Action cards (Upload / Paste / Record / Blank Document) ── 305×275 cards (no longer square). The tuner scales the WIDTH via --khio-action-card-size; height stays proportional via the 275/305 ratio. khioSetCardSize(310) → 310 wide, ~280 tall khioResetCardSize() → 305 × 275 default */ body.khio-desktop .action-cards { gap: 22px !important; grid-template-columns: repeat(4, minmax(0, var(--khio-action-card-size, 305px))) !important; justify-content: start !important; max-width: none !important; } body.khio-desktop .action-card { background: #ffffff !important; border: 1px solid rgba(15,23,42,0.08) !important; border-radius: 22px !important; padding: 28px 22px !important; aspect-ratio: unset !important; width: var(--khio-action-card-size, 305px) !important; height: calc(var(--khio-action-card-size, 305px) * (275 / 305)) !important; min-height: 0 !important; max-width: var(--khio-action-card-size, 305px) !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.04) !important; transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease !important; } /* Card-size tuner, small button + popover */ body.khio-desktop .action-cards-tuner-wrap { position: relative !important; display: flex !important; justify-content: flex-end !important; margin-top: 8px !important; } body.khio-desktop .action-cards-tuner-btn { display: inline-flex !important; align-items: center !important; gap: 7px !important; padding: 6px 12px !important; border-radius: 999px !important; border: 1px solid rgba(15,23,42,0.08) !important; background: #ffffff !important; color: rgba(15,23,42,0.55) !important; font-size: 12px !important; font-weight: 600 !important; cursor: pointer !important; font-family: inherit !important; transition: all 0.15s !important; } body.khio-desktop .action-cards-tuner-btn:hover { border-color: rgba(15,23,42,0.18) !important; color: rgba(15,23,42,0.85) !important; background: #fafafa !important; } body.khio-desktop .action-cards-tuner-btn i { width: 13px !important; height: 13px !important; } body.khio-desktop .action-cards-tuner-pop { position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; display: none !important; align-items: center !important; gap: 6px !important; padding: 8px 10px !important; border-radius: 12px !important; border: 1px solid rgba(15,23,42,0.08) !important; background: #ffffff !important; box-shadow: 0 12px 28px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.04) !important; z-index: 100 !important; font-size: 12px !important; } body.khio-desktop .action-cards-tuner-pop.open { display: inline-flex !important; } body.khio-desktop .action-cards-tuner-label { font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: rgba(15,23,42,0.45) !important; margin-right: 4px !important; font-weight: 700 !important; } body.khio-desktop .action-cards-tuner-step { width: 28px !important; height: 28px !important; border-radius: 8px !important; border: 1px solid rgba(15,23,42,0.1) !important; background: #ffffff !important; color: rgba(15,23,42,0.85) !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important; font-family: inherit !important; transition: all 0.1s !important; } body.khio-desktop .action-cards-tuner-step:hover { border-color: var(--study-accent, #c17a4e) !important; color: var(--study-accent, #c17a4e) !important; } body.khio-desktop .action-cards-tuner-value { min-width: 36px !important; text-align: center !important; font-weight: 700 !important; color: rgba(15,23,42,0.85) !important; font-size: 13px !important; } body.khio-desktop .action-cards-tuner-unit { color: rgba(15,23,42,0.45) !important; font-size: 11px !important; margin-right: 2px !important; } body.khio-desktop .action-cards-tuner-reset { margin-left: 4px !important; padding: 5px 10px !important; border-radius: 8px !important; border: none !important; background: transparent !important; color: rgba(15,23,42,0.45) !important; font-size: 11px !important; font-weight: 600 !important; cursor: pointer !important; font-family: inherit !important; } body.khio-desktop .action-cards-tuner-reset:hover { color: rgba(15,23,42,0.85) !important; } /* Tuner-hide rules MOVED out of this @media block on 2026-05-05, they used to live below this point, but a stray `}` was prematurely closing the desktop @media block here, leaving every redesign rule below (72px hero, 340-wide cards, 1456-wide rows) completely UNSCOPED. iPad was inheriting all of them. James caught it. The tuner-hide rules now sit AFTER this @media block closes (search for "Tuner, kept hidden everywhere except desktop"). */ body.khio-desktop .action-card:hover { transform: translateY(-2px) !important; box-shadow: 0 4px 8px rgba(15,23,42,0.06), 0 12px 28px rgba(15,23,42,0.08) !important; border-color: rgba(15,23,42,0.14) !important; } body.khio-desktop .action-icon-circle { width: 72px !important; height: 72px !important; border-radius: 20px !important; margin: 0 auto 18px !important; } body.khio-desktop .action-icon-circle i { width: 36px !important; height: 36px !important; stroke-width: 1.8 !important; } /* Restore warm tinted backgrounds + colored icons on the four action-card variants. study-core.css:135-148 forces them all to neutral gray (!important) which kills the mockup's vibe. These overrides win because study-themes.css loads AFTER study-core.css and same specificity → later wins. James 2026-05-05. */ body.khio-desktop .action-card--orange .action-icon-circle { background: rgba(144,71,44,0.12) !important; color: #90472c !important; } body.khio-desktop .action-card--orange .action-icon-circle i, body.khio-desktop .action-card--orange .action-icon-circle svg { color: #90472c !important; } body.khio-desktop .action-card--blue .action-icon-circle { background: rgba(59,130,246,0.12) !important; color: #3b82f6 !important; } body.khio-desktop .action-card--blue .action-icon-circle i, body.khio-desktop .action-card--blue .action-icon-circle svg { color: #3b82f6 !important; } body.khio-desktop .action-card--red .action-icon-circle { background: rgba(239,68,68,0.12) !important; color: #ef4444 !important; } body.khio-desktop .action-card--red .action-icon-circle i, body.khio-desktop .action-card--red .action-icon-circle svg { color: #ef4444 !important; } body.khio-desktop .action-card--purple .action-icon-circle { background: rgba(131,56,236,0.12) !important; color: #8338ec !important; } body.khio-desktop .action-card--purple .action-icon-circle i, body.khio-desktop .action-card--purple .action-icon-circle svg { color: #8338ec !important; } body.khio-desktop .action-card--green .action-icon-circle { background: rgba(34,197,94,0.12) !important; color: #22c55e !important; } body.khio-desktop .action-card--green .action-icon-circle i, body.khio-desktop .action-card--green .action-icon-circle svg { color: #22c55e !important; } body.khio-desktop .action-label { font-size: 19px !important; font-weight: 700 !important; margin-bottom: 8px !important; color: #15172a !important; letter-spacing: -0.01em !important; } body.khio-desktop .action-sub { font-size: 13.5px !important; color: rgba(15,23,42,0.55) !important; line-height: 1.5 !important; max-width: 220px !important; margin: 0 auto !important; } /* ── Recent sets header ── */ body.khio-desktop .sets-heading { font-size: 26px !important; font-weight: 800 !important; color: #15172a !important; letter-spacing: -0.01em !important; } body.khio-desktop .folder-chip { background: rgba(15,23,42,0.04) !important; border: none !important; color: rgba(15,23,42,0.72) !important; padding: 7px 14px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 600 !important; } body.khio-desktop .folder-chip:hover { background: rgba(15,23,42,0.07) !important; } body.khio-desktop .folder-chip.active { background: rgba(193,122,78,0.10) !important; color: var(--study-accent, #c17a4e) !important; } /* "+ New Folder", square button with colored folder icon */ body.khio-desktop .folder-create-btn, body.khio-desktop #btnCreateFolder { padding: 11px 18px !important; border-radius: 12px !important; border: 1px solid rgba(15,23,42,0.12) !important; background: #ffffff !important; color: rgba(15,23,42,0.85) !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; transition: all 0.15s !important; } body.khio-desktop .folder-create-btn i, body.khio-desktop #btnCreateFolder i { color: var(--study-accent, #c17a4e) !important; width: 16px !important; height: 16px !important; } body.khio-desktop .folder-create-btn:hover, body.khio-desktop #btnCreateFolder:hover { border-color: rgba(193,122,78,0.4) !important; background: rgba(193,122,78,0.04) !important; } /* ── Set rows (Your Recent Sets), fill the screen, 125 tall ── */ body.khio-desktop .sets-grid { gap: 10px !important; max-width: none !important; } /* James 2026-05-13: shrunk set-row min-height 125→78 (45% off) and tightened padding so a single row reads as a list item, not a banner. The 138px-tall rows were eating ~3 viewport heights of vertical real-estate when the user has multiple sets, now ~80px each. */ body.khio-desktop .set-card { background: #ffffff !important; border: 1px solid rgba(15,23,42,0.08) !important; border-radius: 14px !important; padding: 12px 18px !important; gap: 14px !important; min-height: 78px !important; box-shadow: 0 1px 2px rgba(15,23,42,0.03) !important; transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.15s ease !important; } body.khio-desktop .set-card:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 14px rgba(15,23,42,0.06) !important; border-color: rgba(15,23,42,0.14) !important; } /* Kill the colored left-edge accent that scholar-set-row tone variants apply via border-left-color :has() rules. The :has() rules use specificity 0,3,2; our :where() compound here also hits 0,3,2 but we win the cascade tie because we're declared LATER in the file. Forcing border-left-color overrides every tone (rose / violet / sky / mint / amber / coral / etc). */ body.khio-desktop .set-card.scholar-set-row, body.khio-desktop .review-set-row.scholar-set-row, body.khio-desktop .set-card.scholar-set-row[class], body.khio-desktop .review-set-row.scholar-set-row[class] { border-left: 1px solid rgba(15,23,42,0.08) !important; border-left-color: rgba(15,23,42,0.08) !important; border-left-width: 1px !important; } body.khio-desktop .set-card-title { font-size: 14.5px !important; font-weight: 700 !important; color: #15172a !important; margin-bottom: 2px !important; line-height: 1.3 !important; } body.khio-desktop .review-set-meta, body.khio-desktop .set-card-meta { font-size: 12px !important; color: rgba(15,23,42,0.5) !important; } /* Subject icon tile on the left of each set row, bigger + bolder. James 2026-05-05: matches the second screenshot with chunky rounded tile + prominent icon. */ body.khio-desktop .set-card .scholar-set-badge, body.khio-desktop .review-set-row .scholar-set-badge, body.khio-desktop .set-card .review-set-badge, body.khio-desktop .review-set-row .review-set-badge { width: 44px !important; height: 44px !important; border-radius: 12px !important; flex-shrink: 0 !important; } body.khio-desktop .set-card .scholar-set-badge i, body.khio-desktop .review-set-row .scholar-set-badge i { width: 20px !important; height: 20px !important; stroke-width: 1.85 !important; } /* Right-side row buttons: outlined folder button + ellipsis menu. Both use the same compact rounded-square treatment from the mockup, folder icon colored in accent. */ body.khio-desktop .review-set-actions { gap: 6px !important; } body.khio-desktop .set-card-folder-btn { width: 34px !important; height: 34px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 9px !important; border: 1px solid rgba(15,23,42,0.1) !important; background: #ffffff !important; color: var(--study-accent, #c17a4e) !important; cursor: pointer !important; font-family: inherit !important; transition: all 0.15s !important; } body.khio-desktop .set-card-folder-btn i { width: 16px !important; height: 16px !important; } body.khio-desktop .set-card-folder-btn:hover { border-color: rgba(193,122,78,0.4) !important; background: rgba(193,122,78,0.06) !important; } body.khio-desktop .set-card-more, body.khio-desktop .review-set-action.review-set-delete { width: 34px !important; height: 34px !important; border-radius: 9px !important; background: transparent !important; color: rgba(15,23,42,0.5) !important; border: 1px solid transparent !important; } body.khio-desktop .set-card-more:hover, body.khio-desktop .review-set-action.review-set-delete:hover { background: rgba(15,23,42,0.04) !important; color: rgba(15,23,42,0.85) !important; } /* Hide the older mastery-bar / methods cluster on the new desktop set-row design, the screenshot shows just title + size + "created Xh ago" + folder + ... menu. Keeps the row clean and matches the mockup. */ body.khio-desktop .set-card-progress, body.khio-desktop .set-card-methods, body.khio-desktop .set-card-badges { display: none !important; } /* ── "All N ▾" folder dropdown chip (replaces inline chips) ── */ /* James 2026-05-13: was overflow: hidden (from study-core.css's collapsed-toolbar slide animation), clipped the dropdown menu inside the 44px-tall .folder-chips bound. The collapsed toolbar isn't used on desktop so flipping overflow back to visible is safe and lets the menu escape the parent. Applies to both Sets (.folder-chips) and Review (.review-folder-chips) since both are folder-chips. */ body.khio-desktop .folder-chips, body.khio-desktop .review-folder-chips { position: relative !important; gap: 8px !important; overflow: visible !important; } body.khio-desktop .folder-dropdown-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 9px 16px !important; border-radius: 999px !important; border: 1px solid rgba(15,23,42,0.1) !important; background: #ffffff !important; color: rgba(15,23,42,0.85) !important; font-size: 13.5px !important; font-weight: 600 !important; cursor: pointer !important; font-family: inherit !important; transition: all 0.15s !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important; } body.khio-desktop .folder-dropdown-btn:hover { border-color: rgba(15,23,42,0.18) !important; background: #fafafa !important; } body.khio-desktop .folder-dropdown-btn .folder-dropdown-count { background: rgba(15,23,42,0.06) !important; color: rgba(15,23,42,0.6) !important; padding: 1px 8px !important; border-radius: 999px !important; font-size: 11.5px !important; font-weight: 700 !important; } body.khio-desktop .folder-dropdown-btn i { width: 15px !important; height: 15px !important; color: rgba(15,23,42,0.55) !important; } body.khio-desktop .folder-dropdown-menu { position: absolute !important; top: calc(100% + 6px) !important; left: 0 !important; min-width: 220px !important; background: #ffffff !important; border: 1px solid rgba(15,23,42,0.08) !important; border-radius: 14px !important; box-shadow: 0 12px 32px rgba(15,23,42,0.1), 0 2px 8px rgba(15,23,42,0.04) !important; padding: 6px !important; z-index: 200 !important; display: none !important; } body.khio-desktop .folder-dropdown-menu.open { display: flex !important; flex-direction: column !important; } body.khio-desktop .folder-dropdown-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 9px 12px !important; border-radius: 10px !important; background: transparent !important; border: none !important; color: rgba(15,23,42,0.85) !important; font-family: inherit !important; font-size: 13.5px !important; font-weight: 600 !important; cursor: pointer !important; text-align: left !important; transition: background 0.1s !important; } body.khio-desktop .folder-dropdown-item:hover { background: rgba(15,23,42,0.04) !important; } body.khio-desktop .folder-dropdown-item.active { background: rgba(193,122,78,0.10) !important; color: var(--study-accent, #c17a4e) !important; } body.khio-desktop .folder-dropdown-item i { width: 15px !important; height: 15px !important; color: rgba(15,23,42,0.55) !important; } body.khio-desktop .folder-dropdown-item.active i { color: var(--study-accent, #c17a4e) !important; } body.khio-desktop .folder-dropdown-item .folder-dropdown-item-count { margin-left: auto !important; background: rgba(15,23,42,0.06) !important; color: rgba(15,23,42,0.55) !important; padding: 1px 8px !important; border-radius: 999px !important; font-size: 11.5px !important; font-weight: 700 !important; } /* Inline × delete on each user folder row. Always visible (subtle) so users can find it without hovering. Brightens on hover. James 2026-05-12, previously there was no desktop way to delete a folder because the inline chips with hover-only × are hidden. */ body.khio-desktop .folder-dropdown-item .folder-dropdown-item-delete { width: 22px !important; height: 22px !important; margin-left: 6px !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: rgba(15,23,42,0.4) !important; font-size: 16px !important; line-height: 1 !important; cursor: pointer !important; transition: all 0.15s !important; flex-shrink: 0 !important; } body.khio-desktop .folder-dropdown-item .folder-dropdown-item-delete:hover { background: rgba(239,68,68,0.10) !important; color: #ef4444 !important; } body.khio-desktop .folder-dropdown-divider { height: 1px !important; background: rgba(15,23,42,0.08) !important; margin: 4px 4px !important; } /* Hide the inline folder chips on desktop, replaced by dropdown */ body.khio-desktop .folder-chip { display: none !important; } /* ════════════════════════════════════════════════════════════ STUDY SETS PAGE REDESIGN, James 2026-05-05 1920×945 viewport (sidebar 340 + main 1580). Inner content 1456 wide. 4 action cards 340×300, recent set rows 1456×138. ════════════════════════════════════════════════════════════ */ /* Inner padding for the whole Study Sets canvas, pushes the header + action cards in from the LEFT edge and pulls the Recent/Filter pills + New Folder button in from the RIGHT. James 2026-05-05. */ body.khio-desktop #view-sets .hero-section, body.khio-desktop #view-sets .sets-section { padding-left: 64px !important; padding-right: 80px !important; } /* Review puts everything inside #reviewLanding (rendered by JS), including .hero-section + .review-landing-empty. Apply padding at the parent level so .hero-section AND the CTA panel both share the same left/right offsets. .hero-section's own padding is reset to 0 so it doesn't double up. James 2026-05-05. */ body.khio-desktop #view-review #reviewLanding { padding-left: 64px !important; padding-right: 80px !important; box-sizing: border-box !important; /* Match Study Sets's .dashboard-layout centering (max-width 1700 + auto horizontal margins) so on wide viewports Review has the same left/right white gaps as Sets. Without this Review spilled flush to the right edge while Sets stayed centered, giving the two pages visibly different gutters. James 2026-05-12. */ max-width: 1700px !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; } body.khio-desktop #view-review .hero-section { padding-left: 0 !important; padding-right: 0 !important; } /* Review already gets the Study Sets page gutter from #reviewLanding. The nested .sets-section has its own base horizontal padding, which pushed the recent-set header and row 32px to the right of Study Sets. Keep the parent gutter and zero the inner section so both tabs start on the same x-line. */ body.khio-desktop #view-review .review-landing > .sets-section { padding-left: 0 !important; padding-right: 0 !important; } /* James 2026-05-05: every Study Sets / Review section child uses the same max-width 1456 + margin:0 auto so the hero header (with Recent/Filter on the right), the action cards row, and the empty-state CTA panel all share the exact same horizontal extent. Stops Recent/Filter from drifting to the page edge on wide viewports and stops the CTA panel from looking narrower than the cards. Review uses .hero-section + .hero-head too (rendered by renderReviewLanding), so the rules apply to both #view- sets and #view-review. */ body.khio-desktop #view-sets .hero-section .hero-head, body.khio-desktop #view-review .hero-section .hero-head { width: 100% !important; max-width: 1456px !important; margin-left: 0 !important; margin-right: auto !important; display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 24px !important; } body.khio-desktop #view-sets .hero-section .hero-search-wrap, body.khio-desktop #view-review .hero-section .hero-search-wrap { flex-shrink: 0 !important; } /* Header, "Khio Study" hero + subtitle */ body.khio-desktop #view-sets .hero-section { padding-top: 24px !important; padding-bottom: 26px !important; } body.khio-desktop #view-sets .hero-title, body.khio-desktop #view-review .hero-section .hero-title, body.khio-desktop #view-review .review-landing-header .hero-title { font-size: 72px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: -0.02em !important; color: #15172a !important; margin: 0 0 18px !important; font-family: 'Ramillas', 'Playfair Display', Georgia, serif !important; } /* Match Sets hero-sub size on Review too. */ body.khio-desktop #view-review .hero-section .hero-sub { font-size: 22px !important; line-height: 1.3 !important; color: rgba(15,23,42,0.55) !important; margin: 0 !important; max-width: 720px !important; } body.khio-desktop #view-sets .hero-sub { font-size: 22px !important; line-height: 1.3 !important; color: rgba(15,23,42,0.55) !important; margin: 0 !important; max-width: 720px !important; } /* Hero filter buttons on Study Sets, bigger to match the new header scale (150–155 × 56 per spec). */ body.khio-desktop #view-sets .hero-filter-btn { padding: 16px 24px !important; font-size: 17px !important; border-radius: 18px !important; min-width: 150px !important; height: 56px !important; justify-content: center !important; } body.khio-desktop #view-sets .hero-filter-btn i { width: 17px !important; height: 17px !important; } /* Note: #view-sets .action-cards grid rule removed 2026-05-12. Sets's grid now uses the same selector as Review further down (search "Review action cards mirror"). */ /* Belt-and-suspenders: hide #actionBlank everywhere if it somehow re-appears via legacy JS. */ #actionBlank { display: none !important; } /* Note: #view-sets .action-card individual rules removed 2026-05-12. Sets now shares Review's left-aligned card layout via the combined selector further down in this file (search "Review action cards mirror"). */ /* "Your Recent Sets" section header, bigger title + bigger New Folder */ body.khio-desktop #view-sets .sets-heading, body.khio-desktop #view-review .sets-heading { font-size: 32px !important; font-weight: 900 !important; color: #15172a !important; letter-spacing: -0.015em !important; font-family: 'Ramillas', 'Playfair Display', Georgia, serif !important; } body.khio-desktop #view-sets .folder-create-btn, body.khio-desktop #view-sets #btnCreateFolder, body.khio-desktop #view-review .folder-create-btn, body.khio-desktop #view-review #btnCreateFolder { padding: 0 22px !important; height: 48px !important; min-width: 160px !important; border-radius: 14px !important; font-size: 15px !important; gap: 10px !important; justify-content: center !important; } body.khio-desktop #view-sets .folder-create-btn i, body.khio-desktop #view-sets #btnCreateFolder i, body.khio-desktop #view-review .folder-create-btn i, body.khio-desktop #view-review #btnCreateFolder i { width: 18px !important; height: 18px !important; } /* "Your Recent Sets" header row + usage bar share the same 1456px max-width as .action-cards above and .sets-grid below. Without this cap the header (and the New Folder button at its right edge) drifted ~80px past the cards' right edge on wide viewports, the header was using the full .sets-section content width while the cards were capped at 1456px. James 2026-05-09. */ body.khio-desktop #view-sets .sets-section-header, body.khio-desktop #view-sets #studyUsageBar, body.khio-desktop #view-review .sets-section-header, body.khio-desktop #view-review #studyUsageBar { max-width: 1456px !important; margin-left: 0 !important; margin-right: auto !important; width: 100% !important; } /* Recent set rows, 1456×138 each, 88px icon tile. */ body.khio-desktop #view-sets .sets-grid, body.khio-desktop #view-review .review-set-grid { gap: 14px !important; max-width: 1456px !important; } /* Demo set card sits inside the same .sets-grid as real set cards but James asked for it nudged a bit to the LEFT on the landing page so it visually peeks out of the standard 64px gutter. -16px puts the card edge slightly past the hero header's left edge without escaping the .sets-section padding entirely. James 2026-05-06. */ body.khio-desktop #view-sets .sets-grid > [data-demo-set] { margin-left: -16px !important; } body.khio-desktop #view-sets .set-card, body.khio-desktop #view-review .review-set-row { width: 100% !important; max-width: 1456px !important; min-height: 138px !important; padding: 24px 32px !important; gap: 24px !important; border-radius: 18px !important; } /* James 2026-05-13: Sets had a scoped #view-sets override that gave it the bigger 88px badges + 19px titles, but Review's #view-review path had no equivalent, so my generic body.khio-desktop downsize made Review's set rows tiny while Sets stayed full-size. Extended every #view-sets selector to also match #view-review so both views read the same. */ /* Shrunk to fit inside the 126px wrapper James was inspecting. Old: 88px badge + 18/24 padding + 19px title = 126px row, which overflowed the parent .sets-section's allowance. New: 60px badge + 14/22 padding gives a ~88px row that sits comfortably inside any 126px container with the storage-info row stacked above. James 2026-05-13. */ body.khio-desktop #view-sets .set-card .scholar-set-badge, body.khio-desktop #view-sets .review-set-row .scholar-set-badge, body.khio-desktop #view-sets .set-card .review-set-badge, body.khio-desktop #view-sets .review-set-row .review-set-badge, body.khio-desktop #view-review .set-card .scholar-set-badge, body.khio-desktop #view-review .review-set-row .scholar-set-badge, body.khio-desktop #view-review .set-card .review-set-badge, body.khio-desktop #view-review .review-set-row .review-set-badge { width: 60px !important; height: 60px !important; border-radius: 16px !important; } body.khio-desktop #view-sets .set-card .scholar-set-badge i, body.khio-desktop #view-sets .review-set-row .scholar-set-badge i, body.khio-desktop #view-review .set-card .scholar-set-badge i, body.khio-desktop #view-review .review-set-row .scholar-set-badge i { width: 28px !important; height: 28px !important; stroke-width: 1.85 !important; } body.khio-desktop #view-sets .set-card-title, body.khio-desktop #view-review .set-card-title, body.khio-desktop #view-review .review-set-copy h4 { font-size: 16px !important; font-weight: 800 !important; margin-bottom: 4px !important; } body.khio-desktop #view-sets .review-set-meta, body.khio-desktop #view-sets .set-card-meta, body.khio-desktop #view-review .review-set-meta, body.khio-desktop #view-review .set-card-meta { font-size: 13px !important; color: rgba(15,23,42,0.5) !important; } body.khio-desktop #view-sets .set-card-folder-btn, body.khio-desktop #view-review .set-card-folder-btn { width: 36px !important; height: 36px !important; border-radius: 10px !important; } body.khio-desktop #view-sets .set-card-folder-btn i, body.khio-desktop #view-review .set-card-folder-btn i { width: 18px !important; height: 18px !important; } body.khio-desktop #view-sets .set-card-more, body.khio-desktop #view-sets .review-set-action.review-set-delete, body.khio-desktop #view-review .set-card-more, body.khio-desktop #view-review .review-set-action.review-set-delete { width: 36px !important; height: 36px !important; border-radius: 10px !important; } /* Row exactly 98px tall to match the user's Sets reference from his Lasqueti account. James 2026-05-13. */ body.khio-desktop #view-sets .set-card, body.khio-desktop #view-review .set-card, body.khio-desktop #view-review .review-set-row { min-height: 98px !important; padding: 16px 24px !important; gap: 16px !important; } /* ════════════════════════════════════════════════════════════ REVIEW PAGE REDESIGN, James 2026-05-05 1920×945 viewport (sidebar 340 + main 1580). Inner content 1458 wide, 3 cards 460×320 with 38 gap, big 1458×365 CTA. ════════════════════════════════════════════════════════════ */ /* Page header, "Review & Learn" hero title 72/72 + subtitle. James 2026-05-05: max-width 1456 + margin-right:auto so the header (with Recent/Filter on the right) shares the same horizontal extent as the action cards row + CTA panel below. */ body.khio-desktop #view-review .review-landing-header { padding: 28px 0 36px !important; width: 100% !important; max-width: 1456px !important; margin-left: 0 !important; margin-right: auto !important; box-sizing: border-box !important; } body.khio-desktop #view-review .review-landing-header .hero-title { font-size: 72px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: -0.02em !important; color: #15172a !important; margin: 0 0 18px !important; font-family: 'Ramillas', 'Playfair Display', Georgia, serif !important; } body.khio-desktop #view-review .review-landing-header .hero-sub { font-size: 25px !important; line-height: 1.25 !important; color: rgba(15,23,42,0.55) !important; margin: 0 !important; max-width: 720px !important; } /* Hero filter buttons on Review, bigger to match the new header scale. The shared .hero-filter-btn rule above sets 13/22 padding; here we bump to 18/28 for Review specifically. */ body.khio-desktop #view-review .hero-filter-btn { padding: 18px 28px !important; font-size: 18px !important; border-radius: 18px !important; min-width: 155px !important; justify-content: center !important; /* Without this, the default .hero-filter-btn rule's fixed height: 51px wins and the padding becomes a no-op, Review buttons end up ~9px shorter than Sets's matching pair. James 2026-05-12. */ height: auto !important; } body.khio-desktop #view-review .hero-filter-btn i { width: 18px !important; height: 18px !important; } /* Study Sets hero, match Review's typography + spacing exactly. Without these overrides the @media (max-height: 820px) clamp shrinks .hero-title to 28px and the default 14/28 filter-btn padding stays in place, so on shorter laptops Sets ended up with a tiny "Khio Study" + cramped Recent/Filter pills while Review had the big 72px header right next door. James called out the inconsistency 2026-05-12. Padding mirrors Review's 28/0/36 but keeps the 32px horizontal so it lines up with the action cards and set grid below (which are padded inside .dashboard-main). */ body.khio-desktop #view-sets .hero-section { /* Top/bottom only so the existing padding-left: 64px / padding-right: 80px rule (line 4282) keeps applying. Using `padding:` shorthand here would zero out the horizontal padding and pull the title 32px left of Review's title, that was the visible misalignment James called out on 2026-05-12. Top padding bumped to 38px so the title's Y position lines up with Review (whose hero is anchored ~14px lower in its parent). */ padding-top: 38px !important; padding-bottom: 18px !important; } body.khio-desktop #view-sets .hero-section .hero-title { font-size: 72px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: -0.02em !important; color: #15172a !important; margin: 0 0 18px !important; font-family: 'Ramillas', 'Playfair Display', Georgia, serif !important; } body.khio-desktop #view-sets .hero-section .hero-sub { font-size: 25px !important; line-height: 1.25 !important; color: rgba(15,23,42,0.55) !important; margin: 0 !important; max-width: 720px !important; } body.khio-desktop #view-sets .hero-section .hero-filter-btn { padding: 18px 28px !important; font-size: 18px !important; border-radius: 18px !important; min-width: 155px !important; justify-content: center !important; height: auto !important; } body.khio-desktop #view-sets .hero-section .hero-filter-btn i { width: 18px !important; height: 18px !important; } /* 3 action cards, Upload / Paste / Add Study Set. 460×320 each. max-width 1456 to match the header + CTA panel max-widths so the row's left/right edges line up with the rest. */ /* 2026-05-12 (James): both Study Sets AND Review use the same left-aligned card with a square icon badge top-left and a black circular arrow ::after pill bottom-right. Review's existing styling is the canonical shape, Sets's old centered-text card is gone. */ body.khio-desktop #view-review .action-cards, body.khio-desktop #view-sets .action-cards { display: grid !important; grid-template-columns: repeat(3, minmax(0, 460px)) !important; gap: 38px !important; margin: 16px auto 40px 0 !important; width: 100% !important; max-width: 1456px !important; justify-content: start !important; } /* James 2026-05-13: cards now scale proportionally with viewport instead of being locked at 320px tall. aspect-ratio 1.65:1 keeps the same wide-rectangle shape from the mockup at every width, at 1920 the cards render ~460×280, at 1352 they render ~340×206, etc. No more squished tall-skinny cards on laptops. Padding and child sizing also use clamp() so they scale with width. */ body.khio-desktop #view-review .action-card, body.khio-desktop #view-sets .action-card { width: auto !important; height: auto !important; aspect-ratio: 1.65 / 1 !important; max-width: none !important; background: #ffffff !important; border: 1px solid rgba(15,23,42,0.08) !important; border-radius: 22px !important; padding: clamp(20px, 2.2vw, 40px) !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; position: relative !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.04) !important; transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease !important; /* James 2026-05-14: distribute icon / title / description vertically across the full card height instead of leaving ~150px of empty white space below the description. The aspect-ratio 1.65 makes cards tall enough that flex-start (the default) leaves obvious dead space at the bottom on wide desktops. Mirrors the same fix applied to the narrow-viewport rule at ~6013. */ justify-content: space-between !important; } body.khio-desktop #view-review .action-card:hover, body.khio-desktop #view-sets .action-card:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04) !important; border-color: rgba(15,23,42,0.14) !important; } body.khio-desktop #view-review .action-card .action-icon-circle, body.khio-desktop #view-sets .action-card .action-icon-circle { width: clamp(56px, 5vw, 88px) !important; height: clamp(56px, 5vw, 88px) !important; border-radius: 20px !important; margin: 0 0 clamp(16px, 1.6vw, 32px) 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } body.khio-desktop #view-review .action-card .action-icon-circle i, body.khio-desktop #view-sets .action-card .action-icon-circle i { width: clamp(26px, 2.3vw, 40px) !important; height: clamp(26px, 2.3vw, 40px) !important; stroke-width: 1.85 !important; } body.khio-desktop #view-review .action-card .action-label, body.khio-desktop #view-sets .action-card .action-label { font-size: clamp(18px, 1.6vw, 28px) !important; font-weight: 800 !important; color: #15172a !important; margin: 0 0 clamp(6px, 0.6vw, 10px) !important; text-align: left !important; letter-spacing: -0.01em !important; max-width: none !important; } body.khio-desktop #view-review .action-card .action-sub, body.khio-desktop #view-sets .action-card .action-sub { font-size: clamp(13px, 1vw, 17px) !important; line-height: 1.45 !important; color: rgba(15,23,42,0.55) !important; text-align: left !important; max-width: 320px !important; margin: 0 !important; } /* Bottom-right arrow button also scales. */ body.khio-desktop #view-review .action-card::after, body.khio-desktop #view-sets .action-card::after { bottom: clamp(18px, 1.8vw, 36px) !important; right: clamp(18px, 1.8vw, 36px) !important; width: clamp(28px, 2.4vw, 36px) !important; height: clamp(28px, 2.4vw, 36px) !important; } /* Unified warm-orange icon tile across all three action cards. Was: Upload peach, Paste BLUE, Record/Add-Set RED/GRAY , clashed with the warm theme. Per-variant overrides above at line ~4013 paint different tints; this scoped override for the Sets/Review views forces them all to peach + orange so the row reads as one consistent set. James 2026-05-13. */ body.khio-desktop #view-review .action-card .action-icon-circle, body.khio-desktop #view-sets .action-card .action-icon-circle { background: rgba(168, 80, 37, 0.10) !important; color: #a85025 !important; } body.khio-desktop #view-review .action-card .action-icon-circle i, body.khio-desktop #view-review .action-card .action-icon-circle svg, body.khio-desktop #view-sets .action-card .action-icon-circle i, body.khio-desktop #view-sets .action-card .action-icon-circle svg { color: #a85025 !important; } /* Arrow button bottom-right, 36×36 round, shared across both views. */ body.khio-desktop #view-review .action-card::after, body.khio-desktop #view-sets .action-card::after { content: '' !important; position: absolute !important; bottom: 36px !important; right: 36px !important; width: 36px !important; height: 36px !important; border-radius: 999px !important; background: #15172a !important; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 16px !important; transition: transform 0.15s !important; } body.khio-desktop #view-review .action-card:hover::after, body.khio-desktop #view-sets .action-card:hover::after { transform: translateX(2px) !important; } /* Big empty-state CTA panel, 1456 wide, 365 tall. Used by BOTH #view-review (.review-landing-empty) AND #view-sets (#setsEmpty has the same .review-landing-empty class via study.html). James 2026-05-05: max-width 1456 + margin-left:0 + margin-right:auto so the panel's left edge aligns with the action cards row above and the hero-head's left edge, instead of auto-centering and drifting away from the cards on wide viewports. */ /* IMPORTANT: do NOT use a blanket `display: flex !important` here, renderSets in study.js / study-core.js hides this panel by setting `style.display = 'none'` when sets exist, and `!important` overrides inline styles. The :not() selector skips the rule when JS has explicitly hidden the panel, so flex layout still kicks in for the empty state. James 2026-05-06: this was showing "Create Your First Study Set" even after the user created a set. */ body.khio-desktop #view-review .review-landing-empty:not([style*="display: none"]):not([style*="display:none"]), body.khio-desktop #view-sets #setsEmpty.review-landing-empty:not([style*="display: none"]):not([style*="display:none"]), body.khio-desktop #view-sets .sets-empty.review-landing-empty:not([style*="display: none"]):not([style*="display:none"]) { /* James 2026-05-18: dropped the white-card chrome (bg / border / box-shadow / border-radius), empty state now sits flat on the page bg instead of inside a secondary boxed container. Only the layout + spacing properties remain so the content (sparkles icon, headline, copy, button, side illustrations) still positions correctly. */ width: 100% !important; max-width: 1456px !important; min-height: 365px !important; padding: 48px !important; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 18px !important; margin: 40px auto 0 0 !important; } body.khio-desktop #view-review .review-landing-empty > i, body.khio-desktop #view-sets #setsEmpty > i, body.khio-desktop #view-sets .sets-empty > i { width: 56px !important; height: 56px !important; color: var(--study-accent, #c17a4e) !important; margin-bottom: 12px !important; align-self: center !important; } body.khio-desktop #view-review .review-landing-empty h3, body.khio-desktop #view-sets #setsEmpty h3, body.khio-desktop #view-sets .sets-empty h3 { font-size: 38px !important; font-weight: 800 !important; color: #15172a !important; margin: 0 !important; letter-spacing: -0.01em !important; font-family: 'Ramillas', 'Playfair Display', Georgia, serif !important; text-align: center !important; } body.khio-desktop #view-review .review-landing-empty p, body.khio-desktop #view-sets #setsEmpty p, body.khio-desktop #view-sets .sets-empty p { font-size: 19px !important; line-height: 1.45 !important; color: rgba(15,23,42,0.55) !important; margin: 0 auto !important; max-width: 540px !important; text-align: center !important; } body.khio-desktop #view-review .review-landing-empty .btn-create, body.khio-desktop #view-sets #setsEmpty .btn-create, body.khio-desktop #view-sets .sets-empty .btn-create { margin: 16px auto 0 !important; width: 185px !important; height: 64px !important; padding: 0 !important; border-radius: 16px !important; background: linear-gradient(135deg, #ff7841 0%, #c17a4e 100%) !important; color: #ffffff !important; font-size: 22px !important; font-weight: 700 !important; border: none !important; box-shadow: 0 6px 20px rgba(193,122,78,0.28) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; cursor: pointer !important; transition: all 0.15s !important; align-self: center !important; } body.khio-desktop #view-review .review-landing-empty .btn-create:hover, body.khio-desktop #view-sets #setsEmpty .btn-create:hover, body.khio-desktop #view-sets .sets-empty .btn-create:hover { transform: translateY(-1px) !important; box-shadow: 0 8px 24px rgba(193,122,78,0.36) !important; } body.khio-desktop #view-review .review-landing-empty .btn-create i, body.khio-desktop #view-sets #setsEmpty .btn-create i, body.khio-desktop #view-sets .sets-empty .btn-create i { width: 18px !important; height: 18px !important; } /* Decorative character illustrations on the left + right of the CTA panel. James 2026-05-05: girl + boy PNGs from the Downloads folder, transparent bg so they sit cleanly inside the white panel. ::before = left, ::after = right. position:absolute so they don't push text around. pointer-events:none so the GET STARTED button stays clickable through them. */ body.khio-desktop #view-review .review-landing-empty, body.khio-desktop #view-sets #setsEmpty.review-landing-empty, body.khio-desktop #view-sets .sets-empty.review-landing-empty { position: relative !important; overflow: hidden !important; } body.khio-desktop #view-sets #setsEmpty.review-landing-empty::before, body.khio-desktop #view-sets .sets-empty.review-landing-empty::before { content: '' !important; position: absolute !important; left: 36px !important; bottom: 24px !important; width: 240px !important; height: 300px !important; background-image: url('/images/cta-character-girl-1.png') !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center bottom !important; pointer-events: none !important; z-index: 0 !important; } body.khio-desktop #view-sets #setsEmpty.review-landing-empty::after, body.khio-desktop #view-sets .sets-empty.review-landing-empty::after { content: '' !important; position: absolute !important; right: 36px !important; bottom: 24px !important; width: 240px !important; height: 300px !important; background-image: url('/images/cta-character-boy-2.png') !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center bottom !important; pointer-events: none !important; z-index: 0 !important; } body.khio-desktop #view-review .review-landing-empty::before { content: '' !important; position: absolute !important; left: 36px !important; bottom: 24px !important; width: 260px !important; height: 300px !important; background-image: url('/images/cta-character-boy-1.png') !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center bottom !important; pointer-events: none !important; z-index: 0 !important; } body.khio-desktop #view-review .review-landing-empty::after { content: '' !important; position: absolute !important; right: 36px !important; bottom: 24px !important; width: 260px !important; height: 300px !important; background-image: url('/images/cta-character-girl-2.png') !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center bottom !important; pointer-events: none !important; z-index: 0 !important; } /* Lift the text content above the character images */ body.khio-desktop #view-review .review-landing-empty > *, body.khio-desktop #view-sets #setsEmpty.review-landing-empty > *, body.khio-desktop #view-sets .sets-empty.review-landing-empty > * { position: relative !important; z-index: 1 !important; } /* ════════════════════════════════════════════════════════════ KHIO LM (NOTEBOOKS) PAGE, DESKTOP REDESIGN James 2026-05-05. 1920×945 viewport, sidebar 340 + main 1580. Inner content 1458 wide. White toolbar pill (search 550×54, two view toggles 58×54, +New Notebook pill 210×56, Import Set pill 180×56). Status row count + storage progress. 3-col 459×210 cards, 2 visible rows. Pagination centered with orange-outlined active page. ALL selectors gated by body.khio-desktop. Inline display:none on the toolbar/status/pagination markup is overridden HERE , they only become visible on real desktop. */ /* Show desktop-only chrome (HTML defaults to display:none) */ body.khio-desktop #view-solve .klm-picker-toolbar { display: block !important; } body.khio-desktop #view-solve .klm-picker-status { display: grid !important; } body.khio-desktop #view-solve .klm-picker-pagination { display: flex !important; } /* Hide the legacy usage bar on desktop, replaced by status row */ body.khio-desktop #view-solve #klmUsageBar { display: none !important; } /* Hide the inline "Create Notebook" / "Add Existing Set" cards on desktop, replaced by the toolbar primary button. Specificity boost via .klm-picker-card.klm-picker-card-create (0,3,2) so it beats the .klm-picker-card { display: block } rule (0,2,2) defined later in this same @media block. */ body.khio-desktop #view-solve .klm-picker-card.klm-picker-card-create, body.khio-desktop #view-solve .klm-picker-card-create.klm-picker-card { display: none !important; } /* Page background → pure white (matches mockup). Re-scoped to light family + codex so dark schemes keep their own canvas. James 2026-05-12. */ body.khio-desktop:is([data-scheme="light"], [data-scheme="paper"], [data-scheme="mono_light"], [data-scheme="khio_light"], [data-scheme="codex"]) #view-solve { background: #ffffff !important; } body.khio-desktop:is([data-scheme="light"], [data-scheme="paper"], [data-scheme="mono_light"], [data-scheme="khio_light"], [data-scheme="codex"]) #view-solve .klm-picker { background: #ffffff !important; } /* Layout grey, panels white, NotebookLM-style card layout so the three columns (Sources / Center / Studio) read as distinct white cards floating on a tinted background. Was both #ffffff which made everything blend. James 2026-05-10. */ body.khio-desktop:is([data-scheme="light"], [data-scheme="paper"], [data-scheme="mono_light"], [data-scheme="khio_light"], [data-scheme="codex"]) #view-solve .klm-layout { background: #eef0f4 !important; } body.khio-desktop:is([data-scheme="light"], [data-scheme="paper"], [data-scheme="mono_light"], [data-scheme="khio_light"], [data-scheme="codex"]) #view-solve .klm-center, body.khio-desktop:is([data-scheme="light"], [data-scheme="paper"], [data-scheme="mono_light"], [data-scheme="khio_light"], [data-scheme="codex"]) #view-solve .klm-chat-area, body.khio-desktop:is([data-scheme="light"], [data-scheme="paper"], [data-scheme="mono_light"], [data-scheme="khio_light"], [data-scheme="codex"]) #view-solve .klm-sources, body.khio-desktop:is([data-scheme="light"], [data-scheme="paper"], [data-scheme="mono_light"], [data-scheme="khio_light"], [data-scheme="codex"]) #view-solve .klm-studio { background: #ffffff !important; } /* Inner padding for the Khio LM canvas. flex-column + full-height so the pagination can sit at the bottom of the viewport via margin-top:auto, regardless of how many notebook rows the grid has. James 2026-05-05. */ body.khio-desktop #view-solve .klm-picker-inner { padding-left: 50px !important; padding-right: 72px !important; padding-top: 0 !important; padding-bottom: 32px !important; max-width: 1580px !important; display: flex !important; flex-direction: column !important; min-height: calc(100vh - 16px) !important; box-sizing: border-box !important; } /* ── Header (My Notebooks + subtitle, Recent/Filter right) ── */ body.khio-desktop #view-solve .klm-picker-header { padding-top: 28px !important; padding-bottom: 32px !important; align-items: flex-start !important; } body.khio-desktop #view-solve .klm-picker-header .hero-title { font-size: 72px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: -0.02em !important; color: #15172a !important; margin: 0 0 14px !important; font-family: 'Ramillas', 'Playfair Display', Georgia, serif !important; } body.khio-desktop #view-solve .klm-picker-header .hero-sub { font-size: 25px !important; line-height: 1.25 !important; color: rgba(15,23,42,0.55) !important; margin: 0 !important; max-width: 720px !important; display: block !important; } /* Recent/Filter pills hidden on Khio LM desktop per James 2026-05-05, the toolbar's search field handles filtering and the New Notebook flow doesn't need a sort toggle yet. */ body.khio-desktop #view-solve .klm-picker-filters { display: none !important; } /* ── Toolbar bar ── margin-top added 2026-05-14 after the "My Notebooks" header was removed: previously the header gave the toolbar a 32px cushion below its own bottom-padding. With the header gone, the toolbar would sit flush against the top of the picker container, this restores ~24px of breathing room. */ body.khio-desktop #view-solve .klm-picker-toolbar { width: 100% !important; max-width: 1458px !important; margin: 24px 0 28px !important; } body.khio-desktop #view-solve .klm-toolbar-bar { display: flex !important; align-items: center !important; gap: 14px !important; width: 100% !important; height: 92px !important; background: #ffffff !important; border: 1px solid rgba(15,23,42,0.06) !important; border-radius: 22px !important; padding: 19px 24px !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 16px rgba(15,23,42,0.04) !important; } body.khio-desktop #view-solve .klm-toolbar-search { position: relative !important; /* James 2026-05-05: was width:550 + flex-shrink:0, that pushed Import Set off the right edge on laptop widths below ~1500px. Now flex:1 with min-width 280, max 550 so the search field absorbs the slack and the action buttons stay visible. */ flex: 1 1 auto !important; min-width: 280px !important; max-width: 550px !important; height: 54px !important; display: flex !important; align-items: center !important; background: #f6f7f9 !important; border: 1px solid rgba(15,23,42,0.06) !important; border-radius: 18px !important; padding: 0 18px 0 48px !important; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s !important; } body.khio-desktop #view-solve .klm-toolbar-search:focus-within { background: #ffffff !important; border-color: rgba(193,122,78,0.4) !important; box-shadow: 0 0 0 3px rgba(193,122,78,0.10) !important; } body.khio-desktop #view-solve .klm-toolbar-search-icon { position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important; width: 18px !important; height: 18px !important; color: rgba(15,23,42,0.45) !important; } body.khio-desktop #view-solve .klm-toolbar-search input { flex: 1 !important; width: 100% !important; background: transparent !important; border: none !important; outline: none !important; font-family: inherit !important; font-size: 15px !important; font-weight: 500 !important; color: #15172a !important; } body.khio-desktop #view-solve .klm-toolbar-search input::placeholder { color: rgba(15,23,42,0.4) !important; } /* View toggle group */ body.khio-desktop #view-solve .klm-toolbar-view-group { display: inline-flex !important; align-items: center !important; gap: 6px !important; flex-shrink: 0 !important; } body.khio-desktop #view-solve .klm-toolbar-view-btn { width: 58px !important; height: 54px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 14px !important; border: 1px solid rgba(15,23,42,0.08) !important; background: #ffffff !important; color: rgba(15,23,42,0.55) !important; cursor: pointer !important; font-family: inherit !important; transition: all 0.15s !important; } body.khio-desktop #view-solve .klm-toolbar-view-btn i { width: 20px !important; height: 20px !important; } body.khio-desktop #view-solve .klm-toolbar-view-btn:hover { background: #fafafa !important; color: rgba(15,23,42,0.85) !important; } body.khio-desktop #view-solve .klm-toolbar-view-btn.active { background: rgba(193,122,78,0.10) !important; border-color: rgba(193,122,78,0.22) !important; color: var(--study-accent, #c17a4e) !important; } /* Action buttons (right side of toolbar) */ body.khio-desktop #view-solve .klm-toolbar-actions { margin-left: auto !important; display: inline-flex !important; align-items: center !important; gap: 14px !important; flex-shrink: 0 !important; } body.khio-desktop #view-solve .klm-toolbar-primary { width: 210px !important; height: 56px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; border-radius: 999px !important; border: none !important; background: linear-gradient(135deg, #ff7841 0%, #c17a4e 100%) !important; color: #ffffff !important; font-family: inherit !important; font-size: 16px !important; font-weight: 700 !important; cursor: pointer !important; box-shadow: 0 6px 20px rgba(193,122,78,0.28) !important; transition: all 0.15s !important; letter-spacing: -0.005em !important; } body.khio-desktop #view-solve .klm-toolbar-primary i { width: 18px !important; height: 18px !important; stroke-width: 2.5 !important; color: #ffffff !important; } body.khio-desktop #view-solve .klm-toolbar-primary:hover { transform: translateY(-1px) !important; box-shadow: 0 8px 24px rgba(193,122,78,0.36) !important; } body.khio-desktop #view-solve .klm-toolbar-secondary { width: 180px !important; height: 56px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; border-radius: 999px !important; border: 1px solid rgba(15,23,42,0.12) !important; background: #ffffff !important; color: #15172a !important; font-family: inherit !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important; transition: all 0.15s !important; } body.khio-desktop #view-solve .klm-toolbar-secondary i { width: 17px !important; height: 17px !important; color: rgba(15,23,42,0.65) !important; } body.khio-desktop #view-solve .klm-toolbar-secondary:hover { border-color: rgba(15,23,42,0.22) !important; background: #fafafa !important; } /* ── Status row (count + storage) ── */ body.khio-desktop #view-solve .klm-picker-status { grid-template-columns: 395px auto 1fr !important; align-items: center !important; column-gap: 0 !important; width: 100% !important; max-width: 1458px !important; margin: 0 0 26px !important; padding: 0 4px !important; height: 28px !important; } body.khio-desktop #view-solve .klm-picker-count { font-size: 16px !important; font-weight: 500 !important; color: rgba(15,23,42,0.7) !important; letter-spacing: -0.005em !important; white-space: nowrap !important; } body.khio-desktop #view-solve .klm-picker-storage { display: inline-flex !important; align-items: center !important; gap: 16px !important; } body.khio-desktop #view-solve .klm-picker-storage-text { font-size: 16px !important; font-weight: 500 !important; color: rgba(15,23,42,0.7) !important; white-space: nowrap !important; } body.khio-desktop #view-solve .klm-picker-storage-track { width: 245px !important; height: 8px !important; background: rgba(15,23,42,0.06) !important; border-radius: 999px !important; overflow: hidden !important; position: relative !important; } body.khio-desktop #view-solve .klm-picker-storage-fill { height: 100% !important; background: linear-gradient(90deg, #ffb088 0%, #c17a4e 100%) !important; border-radius: 999px !important; transition: width 0.3s ease !important; } /* ── 3-column notebook grid: 459×210 cards ── */ body.khio-desktop #view-solve .klm-picker-grid { display: grid !important; grid-template-columns: repeat(3, 459px) !important; column-gap: 40px !important; row-gap: 28px !important; width: 100% !important; max-width: 1458px !important; justify-content: start !important; padding: 0 !important; margin: 0 !important; } /* Card uses FLEX COLUMN flow (not absolute) so info + footer can never overlap regardless of title length. James 2026-05-05 , earlier absolute layout had info at top:108 and footer at bottom:22, which collided when the title wrapped to 2 lines. */ body.khio-desktop #view-solve .klm-picker-card { width: 459px !important; height: 240px !important; min-height: 240px !important; max-width: 459px !important; aspect-ratio: unset !important; background: #ffffff !important; border: 1px solid rgba(15,23,42,0.06) !important; border-radius: 22px !important; padding: 22px 28px 20px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; position: relative !important; overflow: hidden !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 16px rgba(15,23,42,0.04) !important; transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease !important; cursor: pointer !important; } body.khio-desktop #view-solve .klm-picker-card:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04) !important; border-color: rgba(15,23,42,0.12) !important; } /* Decorative tinted blob, full-card backdrop */ body.khio-desktop #view-solve .klm-picker-card .klm-card-blob { position: absolute !important; inset: 0 !important; pointer-events: none !important; opacity: 0.7 !important; z-index: 0 !important; } /* 84×84 icon tile (1.5× the previous 56), top-left in natural flow per James 2026-05-05. align-self:flex-start on the card overrides any inherited center alignment. */ body.khio-desktop #view-solve .klm-picker-card .klm-card-icon { position: relative !important; width: 84px !important; height: 84px !important; min-width: 84px !important; border-radius: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 0 10px 0 !important; flex-shrink: 0 !important; align-self: flex-start !important; z-index: 1 !important; } body.khio-desktop #view-solve .klm-picker-card .klm-card-icon i, body.khio-desktop #view-solve .klm-picker-card .klm-card-icon svg { width: 40px !important; height: 40px !important; stroke-width: 1.85 !important; } /* Overflow menu floats top-right (only absolute element) */ body.khio-desktop #view-solve .klm-picker-card .klm-picker-card-menu { position: absolute !important; top: 18px !important; right: 18px !important; width: 28px !important; height: 28px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: none !important; border-radius: 8px !important; color: rgba(15,23,42,0.4) !important; cursor: pointer !important; padding: 0 !important; z-index: 2 !important; transition: background 0.12s, color 0.12s !important; } body.khio-desktop #view-solve .klm-picker-card .klm-picker-card-menu:hover { background: rgba(15,23,42,0.06) !important; color: rgba(15,23,42,0.85) !important; } body.khio-desktop #view-solve .klm-picker-card .klm-picker-card-menu i { width: 18px !important; height: 18px !important; } /* Info block flows naturally and grows to fill remaining space */ body.khio-desktop #view-solve .klm-picker-card-info { position: relative !important; flex: 1 1 auto !important; min-height: 0 !important; width: 100% !important; display: flex !important; flex-direction: column !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; z-index: 1 !important; left: auto !important; right: auto !important; top: auto !important; align-items: flex-start !important; } body.khio-desktop #view-solve .klm-picker-card-title { font-size: 20px !important; font-weight: 800 !important; color: #15172a !important; margin: 0 !important; letter-spacing: -0.012em !important; line-height: 1.2 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; white-space: normal !important; text-align: left !important; padding-right: 36px !important; } body.khio-desktop #view-solve .klm-picker-card-meta { font-size: 14px !important; font-weight: 500 !important; color: rgba(15,23,42,0.5) !important; margin: 0 !important; line-height: 1.35 !important; text-align: left !important; } /* Footer sits at the natural end of the column with a divider */ body.khio-desktop #view-solve .klm-picker-card .klm-card-footer { position: relative !important; flex-shrink: 0 !important; margin-top: 8px !important; padding-top: 8px !important; border-top: 1px solid rgba(15,23,42,0.07) !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; z-index: 1 !important; left: auto !important; right: auto !important; bottom: auto !important; } body.khio-desktop #view-solve .klm-picker-card .klm-card-time { font-size: 14px !important; font-weight: 500 !important; color: rgba(15,23,42,0.45) !important; } /* James 2026-05-18: shrink the notebook picker cards on laptop-scale (1024-1907px). The 459×240 wide-desktop card sizing was visibly oversized on a 1272px laptop, the grid + the rail-mounted sidebar left huge empty rows and each tile felt like a poster. Scale down: 340×180, smaller padding, ~75% icon size, and tightened typography. Wide-desktop keeps the original sizing untouched. */ body.khio-laptop-scale #view-solve .klm-picker-card { width: 340px !important; height: 180px !important; min-height: 180px !important; max-width: 340px !important; border-radius: 18px !important; padding: 16px 20px 14px !important; } body.khio-laptop-scale #view-solve .klm-picker-card .klm-card-icon { width: 56px !important; height: 56px !important; min-width: 56px !important; border-radius: 13px !important; margin: 0 0 6px 0 !important; } body.khio-laptop-scale #view-solve .klm-picker-card .klm-card-icon i, body.khio-laptop-scale #view-solve .klm-picker-card .klm-card-icon svg { width: 28px !important; height: 28px !important; } body.khio-laptop-scale #view-solve .klm-picker-card-title { font-size: 16px !important; padding-right: 28px !important; } body.khio-laptop-scale #view-solve .klm-picker-card-meta { font-size: 12.5px !important; } body.khio-laptop-scale #view-solve .klm-picker-card .klm-picker-card-menu { top: 12px !important; right: 12px !important; width: 24px !important; height: 24px !important; } body.khio-laptop-scale #view-solve .klm-picker-card .klm-picker-card-menu i { width: 16px !important; height: 16px !important; } /* ── Pagination, pinned to the BOTTOM of the picker canvas via margin-top:auto. This works because .klm-picker-inner is a flex column with min-height full-viewport. James 2026-05-05: the pagination sits at the bottom regardless of how many rows of notebooks render above it. */ body.khio-desktop #view-solve .klm-picker-pagination { align-items: center !important; justify-content: center !important; gap: 14px !important; width: 100% !important; max-width: 1458px !important; margin: auto auto 0 !important; padding-top: 40px !important; } body.khio-desktop #view-solve .klm-page-btn { width: 46px !important; height: 46px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 14px !important; border: 1px solid rgba(15,23,42,0.08) !important; background: #ffffff !important; color: rgba(15,23,42,0.55) !important; cursor: pointer !important; font-family: inherit !important; box-shadow: 0 1px 2px rgba(15,23,42,0.03) !important; transition: all 0.15s !important; padding: 0 !important; } body.khio-desktop #view-solve .klm-page-btn i { width: 18px !important; height: 18px !important; } body.khio-desktop #view-solve .klm-page-btn:hover { border-color: rgba(15,23,42,0.16) !important; background: #fafafa !important; color: rgba(15,23,42,0.95) !important; } body.khio-desktop #view-solve .klm-page-numbers { display: inline-flex !important; align-items: center !important; gap: 4px !important; margin: 0 !important; } body.khio-desktop #view-solve .klm-page-num { min-width: 46px !important; height: 46px !important; padding: 0 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 14px !important; border: 1px solid transparent !important; background: transparent !important; color: rgba(15,23,42,0.55) !important; cursor: pointer !important; font-family: inherit !important; font-size: 16px !important; font-weight: 600 !important; transition: all 0.15s !important; } body.khio-desktop #view-solve .klm-page-num:hover { background: rgba(15,23,42,0.04) !important; color: #15172a !important; } body.khio-desktop #view-solve .klm-page-num.active { background: #ffffff !important; color: var(--study-accent, #c17a4e) !important; border-color: var(--study-accent, #c17a4e) !important; box-shadow: 0 1px 2px rgba(193,122,78,0.08) !important; } body.khio-desktop #view-solve .klm-page-num.active:hover { background: rgba(193,122,78,0.04) !important; color: var(--study-accent, #c17a4e) !important; } /* ── Hero empty state (no notebooks yet), large white panel with the 3D notebook illustration + "+ New Notebook" gradient pill + "Import Set" outlined pill. James 2026-05-05. Spans the full grid width via grid-column:1/-1 so it doesn't get sliced into a 459-wide single column. */ body.khio-desktop #view-solve .klm-empty-hero { grid-column: 1 / -1 !important; width: 100% !important; max-width: 1458px !important; background: #ffffff !important; border: 1px solid rgba(15,23,42,0.08) !important; border-radius: 24px !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.05) !important; padding: 56px 48px 60px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 16px !important; margin: 0 auto !important; } body.khio-desktop #view-solve .klm-empty-hero-img { width: 200px !important; height: auto !important; margin: 0 0 12px 0 !important; user-select: none !important; pointer-events: none !important; } body.khio-desktop #view-solve .klm-empty-hero-title { font-size: 38px !important; font-weight: 800 !important; color: #15172a !important; margin: 0 !important; letter-spacing: -0.01em !important; font-family: 'Ramillas', 'Playfair Display', Georgia, serif !important; text-align: center !important; } body.khio-desktop #view-solve .klm-empty-hero-desc { font-size: 18px !important; line-height: 1.45 !important; color: rgba(15,23,42,0.55) !important; margin: 0 auto !important; max-width: 540px !important; text-align: center !important; } body.khio-desktop #view-solve .klm-empty-hero-actions { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; margin-top: 16px !important; } body.khio-desktop #view-solve .klm-empty-hero-primary { /* James 2026-05-14: width bumped 210→280 to fit the longer "Create your first notebook" CTA copy. Was cropping at 210. */ min-width: 280px !important; padding: 0 24px !important; height: 56px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; border-radius: 999px !important; border: none !important; background: linear-gradient(135deg, #ff7841 0%, #c17a4e 100%) !important; color: #ffffff !important; font-family: inherit !important; font-size: 16px !important; font-weight: 700 !important; cursor: pointer !important; box-shadow: 0 6px 20px rgba(193,122,78,0.28) !important; transition: all 0.15s !important; letter-spacing: -0.005em !important; } body.khio-desktop #view-solve .klm-empty-hero-primary i { width: 18px !important; height: 18px !important; stroke-width: 2.5 !important; color: #ffffff !important; } body.khio-desktop #view-solve .klm-empty-hero-primary:hover { transform: translateY(-1px) !important; box-shadow: 0 8px 24px rgba(193,122,78,0.36) !important; } body.khio-desktop #view-solve .klm-empty-hero-secondary { width: 180px !important; height: 56px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; border-radius: 999px !important; border: 1px solid rgba(15,23,42,0.12) !important; background: #ffffff !important; color: #15172a !important; font-family: inherit !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important; transition: all 0.15s !important; } body.khio-desktop #view-solve .klm-empty-hero-secondary i { width: 17px !important; height: 17px !important; color: rgba(15,23,42,0.65) !important; } body.khio-desktop #view-solve .klm-empty-hero-secondary:hover { border-color: rgba(15,23,42,0.22) !important; background: #fafafa !important; } } /* ════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ NON-DESKTOP HIDES, James 2026-05-05 Anything that's a desktop-redesign-only element gets hidden explicitly here so it can never bleed onto iPad/mobile even if a future @media query is sloppy. body.khio-desktop is set by JS in study-core.js, see _khioIsDesktop(). When the body does NOT have that class, the rules below kick in. */ /* Kill the colored left-edge stripe on set rows for iPad and mobile, the 3px tone-color border was sticking out past the card's rounded corners and looked like a "tab" hanging off each card. The selector matches every variant that the scholar-set-row tone system applies (rose, violet, coral, amber, stone, mint, sky, teal, etc.) via [class] specificity bump so it beats the :has() rules at line 3736+. */ body:not(.khio-desktop) .set-card.scholar-set-row, body:not(.khio-desktop) .review-set-row.scholar-set-row, body:not(.khio-desktop) .set-card.scholar-set-row[class], body:not(.khio-desktop) .review-set-row.scholar-set-row[class] { border-left: 1px solid rgba(15,23,42,0.06) !important; border-left-color: rgba(15,23,42,0.06) !important; border-left-width: 1px !important; } /* Folder button on set rows, was inheriting the default browser