/* device_modes.css — layout overrides per device mode. * Activated by data-device on (set by device_mode.js). * Orthogonal to body.mode-driving / body.mode-ops. * * Strategy: each mode tweaks design tokens (--gap, --tap) and a handful of * structural rules. The base stylesheet (app.css) is the "laptop" baseline, * so [data-device="laptop"] needs almost no overrides. */ /* ---- LITE (phone essentials) ------------------------------------------- */ :root[data-device="lite"] { --gap: 10px; --tap: 48px; } :root[data-device="lite"] #content { padding: 12px 10px 80px; } /* Force single-column grids on phones */ :root[data-device="lite"] .grid { grid-template-columns: 1fr !important; } /* Bigger tap targets in the page nav */ :root[data-device="lite"] #pagenav a { font-size: 14px; padding: 10px 14px; } /* Hide secondary chrome to keep phones focused */ :root[data-device="lite"] .device-hide-lite { display: none !important; } /* Promote a bottom-safe area for one-handed use */ :root[data-device="lite"] .card { padding: 14px; } /* ---- FOLDABLE (Z Fold 7 unfolded = two-pane) --------------------------- */ :root[data-device="foldable"] { --gap: 12px; --tap: 46px; } :root[data-device="foldable"] .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Pages that opt into a master-detail split on the inner screen */ :root[data-device="foldable"] .device-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); } /* ---- TABLET ------------------------------------------------------------ */ :root[data-device="tablet"] { --gap: 14px; } :root[data-device="tablet"] .grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } :root[data-device="tablet"] #content { padding: 18px 18px; } /* ---- LAPTOP / DESKTOP (baseline — minimal overrides) ------------------- */ :root[data-device="laptop"] #content { padding: 20px 24px; } :root[data-device="laptop"] .grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* ---- PRESENTATION (TV / projector) ------------------------------------- */ :root[data-device="presentation"] { --gap: 28px; --tap: 64px; --radius-lg: 26px; font-size: 22px; /* scale the whole rem/em system up */ } /* Hide operational chrome — a TV audience doesn't need the status line or the driving/ops toggle. Keep the section nav for the presenter. */ :root[data-device="presentation"] #statusline, :root[data-device="presentation"] .voice-fab, :root[data-device="presentation"] .device-hide-presentation { display: none !important; } :root[data-device="presentation"] #topbar { padding: 14px 28px; } :root[data-device="presentation"] #content { padding: 40px 64px; } :root[data-device="presentation"] .card { padding: 32px; border-radius: 26px; } :root[data-device="presentation"] .card > h2, :root[data-device="presentation"] .card > h3 { font-size: 18px; } :root[data-device="presentation"] .grid { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 28px; } :root[data-device="presentation"] .bignum { font-size: clamp(56px, 8vw, 110px); } :root[data-device="presentation"] #pagenav a { font-size: 20px; padding: 14px 22px; } /* ---- DEMO badge -------------------------------------------------------- */ :root[data-demo="1"] body::after { content: "DEMO DATA"; position: fixed; bottom: 10px; right: 12px; z-index: 9999; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; padding: 5px 10px; border-radius: 999px; color: #07091a; background: var(--grad-warn); box-shadow: var(--glow-warn); pointer-events: none; }