/* ============================================================================ Course-detail family — mobile foundation (Android / iOS phones). Shared across My Courses + the 7 course-detail tabs (overview, lessons, tasks, students, progress, gradebook, standardized-exams). Everything here is gated behind @media (max-width:640px) plus a safe-area layer that is inert on notchless devices (env() resolves to 0), so the desktop/tablet layout is untouched. Requires on the page for env(safe-area-inset-*) to resolve to real values. IMPORTANT — the app shell already owns the mobile *bottom* nav: on phones tetra-shell-v2.js flips to .tetra-mobile-nav-canonical and renders aside.k-sidebar as a fixed bottom bar (~62px, z-index 9995: Home / My Courses / Library / Tasks / More). So this file does NOT add a second bottom bar. Instead: • the course sub-nav (nav.kw-dock, the 7 tabs) becomes a horizontal-scroll strip in place, near the top — not a competing bottom bar; • page content is padded at the bottom to clear the shell's bottom bar; • the Socrates FAB is lifted above the shell's bottom bar. ========================================================================== */ /* ── Safe-area gutters on the shell (notch landscape / rounded corners) ───── */ @supports (padding: max(0px)) { @media (max-width: 640px) { .app-shell { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } } } @media (max-width: 640px) { /* ── Content column: full-bleed single column, clear of the shell's fixed bottom nav (~62px) + the home-indicator inset. ─────────────────────── */ main.page-content { padding: 14px 14px calc(76px + env(safe-area-inset-bottom)) 14px !important; } /* Collapse the common multi-column grids to a single column. */ .kw-today, .kw-grid, .cards-grid, .stat-grid, .kpi-row, .kpi-grid, .signal-grid, .students-grid, .lessons-list[data-view="grid"] { grid-template-columns: 1fr !important; } /* Hero: let the id block and the ops strip wrap instead of overflowing. */ .kw-hero2__top { flex-wrap: wrap; } .kw-hero2__ops { flex-wrap: wrap; gap: 8px !important; } .kw-hero2__op { flex: 1 1 46%; } /* Hero action buttons: full-width, comfortable rows. */ .kw-hero2__actions, .course-header .kw-dock-actions { flex-wrap: wrap; gap: 8px !important; } .kw-dock-btn { flex: 1 1 auto; justify-content: center; } /* ── Touch targets: 44px minimum on interactive controls ────────────────── */ .btn, .kw-dock-btn, .pill, .gb-view-btn, .gb-report-btn, .gb-print-btn, .kairos-filter-chip, .exam-cat, .searchbar input { min-height: 44px; } .btn, .kw-dock-btn, .gb-view-btn, .gb-print-btn { display: inline-flex; align-items: center; } /* Wide content (grade matrix, average tables) scrolls inside its own box. */ .matrix-wrap, .gb-averages-wrap, .gb-matrix-card, .table-scroll { -webkit-overflow-scrolling: touch; } /* ── Course sub-nav → horizontal-scroll strip (in place, near the top) ─── The shell owns the bottom bar, so these tabs stay as a scrollable pill row that bleeds to the screen edges. No fixed positioning. ─────────── */ nav.kw-dock { display: flex !important; flex-wrap: nowrap !important; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x proximity; margin: 12px -14px 6px !important; /* bleed past the 14px page gutter */ padding: 2px 14px !important; } nav.kw-dock::-webkit-scrollbar { display: none; } nav.kw-dock .kw-dock-item { flex: 0 0 auto; scroll-snap-align: start; min-height: 40px; white-space: nowrap; align-items: center; } /* ── Lift the Socrates FAB (and its hint) above the shell's bottom bar ──── */ .k-socrates-fab, .k-socrates-fab-hint { bottom: calc(74px + env(safe-area-inset-bottom)) !important; right: 14px !important; } } /* ════════════════════════════════════════════════════════════════════════ Tablet range (641–1024px) — iPad portrait/landscape, small laptops. Here the shell keeps its side rail (tetra-shell-v2 collapses the sidebar to a rail at 721–1180px), so there is NO fixed bottom bar and the .kw-dock sub-nav stays a normal horizontal tab row. This block only tunes touch ergonomics, wraps the widest card grids to two columns, and keeps wide tables scrolling inside their own box. ════════════════════════════════════════════════════════════════════════ */ /* ── Width containment (≤1180px, the collapsed-rail zone) ──────────────────── Grid/flex children default to min-width:auto (their content size), so a card with a wide inner grid pushes .layout past .page-inner — Course Intelligence rendered wider than its sibling Course-settings card (size mismatch + h-scroll). Let the main-column blocks shrink to the container so every card matches. */ @media (max-width: 1180px) { main.page-content .page-inner{ max-width: 100% !important; } .layout{ min-width: 0 !important; } .layout > *, .stack > *, .kw-copilot, .kw-ci, .kw-sink{ min-width: 0 !important; } .layout > * *{ max-width: 100%; } } @media (min-width: 641px) and (max-width: 1180px) { /* Touch targets — tablets are touch-first. */ .btn, .kw-dock-btn, .pill, .gb-view-btn, .gb-report-btn, .gb-print-btn, .kairos-filter-chip, .exam-cat { min-height: 42px; } /* Two-up card grids where the desktop layout would pack 3+ across. */ .cards-grid, .students-grid, .signal-grid, .kw-today { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* Hero ops strip: let the stat chips wrap instead of squashing. */ .kw-hero2__ops { flex-wrap: wrap; } /* Wide content keeps its own horizontal scroll. */ .matrix-wrap, .gb-averages-wrap, .gb-matrix-card, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ════════════════════════════════════════════════════════════════════════ Compact course hero (phones + small tablets, ≤900px). The two-level hero (.kw-hero2) is built for desktop: min-height 154px, a big watermark initial, and five action buttons that the base <820px rule stacks full-width — on a phone that alone runs the hero past a full screen height. Shrink the watermark + type, lay the five actions out as a tight 2-up grid (primary spans full width), and condense the ops strip so the hero is a compact header, not a landing page. Breakpoint is ≤900px to match the Standardized-Exams hero pattern: that page keeps its full desktop hero until ≤820/900 and only then stacks, so at the small-laptop range (900–1180) it reads as a proper desktop header. The rest of the family previously compacted at ≤1180, which made the SAME viewport look "mobile-squished" on Assignments/Overview/etc. while Exams looked full — the reported inconsistency. Compacting only ≤900 makes every family tab expand the same as Exams across the intermediate zone. (Width containment and the 2-up card grids below still extend to 1180 — only the hero changes.) ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .kw-hero2, .kw-hero2 .ch-banner, .kw-hero2__top { min-height: 0 !important; } /* In the <820px column layout the base .kw-hero2__id keeps its desktop flex:1 1 340px — a 340px height FLOOR on the main axis — and __top uses justify-content:space-between, which spreads the id block and the dock apart with a tall gap. Collapse both so the hero is content-height. */ .kw-hero2__top { padding: 12px 14px !important; gap: 10px !important; justify-content: flex-start !important; } .kw-hero2__id { flex: 0 1 auto !important; } .kw-hero2 .ch-eyebrow { font-size: 10px !important; } .kw-hero2 .ch-title { font-size: 17px !important; margin: 2px 0 4px !important; } .kw-hero2__meta { gap: 5px !important; } .kw-hero2 .ch-banner-initials { font-size: 34px !important; } /* Five hero actions → tight 2-column grid (primary spans the row). */ .kw-hero2__dock { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; width: 100% !important; } .kw-hero2__dock .kw-dock-btn { min-height: 40px !important; padding: 8px 10px !important; font-size: 12px !important; justify-content: center; text-align: center; } .kw-hero2__dock .kw-dock-btn--primary { grid-column: 1 / -1; } /* Ops strip: compact, wrapping stat chips. */ .kw-hero2__ops { padding: 8px 10px !important; gap: 6px !important; } .kw-hero2__op { flex: 1 1 44% !important; padding: 6px 9px !important; font-size: 11px !important; } } /* ── Small-laptop range (901–1180px) — Exams-parity hero ────────────────────── Above 900 the hero keeps its FULL desktop proportions (154px, 28px title, big watermark) exactly like the Standardized-Exams hero — no mobile shrink. The only difference from a 1-action page (Exams) is that the rest of the family carries five hero actions, which would wrap ragged top-right at these widths. So the ONLY thing this block does is lay those actions out as a clean full-width auto-fit toolbar under the title (primary spans the row), instead of a ragged right-aligned wrap. Result: every family tab reads as the same full desktop hero as Exams across the intermediate zone. */ @media (min-width: 901px) and (max-width: 1180px) { .kw-hero2__dock { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; justify-content: stretch; } .kw-hero2__dock .kw-dock-btn { justify-content: center; text-align: center; } .kw-hero2__dock .kw-dock-btn--primary { grid-column: 1 / -1; } }