/* Somatro Aurora — Spacing, safe areas & shell geometry 8px base rhythm. Shell dimensions are first-class tokens: focus must never shift layout, so rail / panel / row geometry is fixed. AUTHORITY: values marked @frozen are product-owner frozen and must not be changed without explicit approval. Values marked @measure are pending measurement from the authority 1920x1080 screens — do not invent them. */ :root { /* ---- Base rhythm ---------------------------------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ---- Safe areas vs layout inset — RULED 2026-07-28 ------------------- TWO INDEPENDENT AUTHORITIES. Do not merge them into one token. 44px = SHELL LAYOUT INSET Where the shell's decorative surfaces begin. Extracted from the approved Movies screen. See --shell-page-inset below. 48px = HORIZONTAL CRITICAL-CONTENT OVERSCAN-SAFE BOUNDARY 27px = VERTICAL CRITICAL-CONTENT OVERSCAN-SAFE BOUNDARY Safety policy. All functional and informational content stays inside this, INCLUDING the complete visible focus treatment — validate the external crisp ring, not just the layout box. The 4px band between x=44 and x=48 (and symmetrically on the right) MAY contain only: non-interactive rounded panel edge, background canvas, restrained ambient treatment, decorative shadow or glow. It MUST NOT contain: text, functional icons, badges, counts, controls, scroll indicators, meaningful status marks, focusable elements, crisp focus rings, or any critical information. TERMINOLOGY: 44px is the "shell layout inset", never a "safe margin". 48/27 are "critical-content overscan-safe boundaries". The phrase "10% action-safe" is SUPERSEDED — at 1920x1080, 48/27 is 2.5%/2.5%. 48px is NOT the required starting position of every surface. */ --safe-overscan-x: 48px; --safe-overscan-y: 27px; /* Title-safe: text and critical glyphs stay inside this. */ --safe-title-x: 48px; --safe-title-y: 27px; /* Critical-content boundary — functional content and complete focus geometry must remain inside these. */ --content-inset-x: 48px; --content-inset-y: 27px; /* Back-compat aliases — prefer the explicit names above in new work. */ --tv-safe-x: var(--content-inset-x); --tv-safe-y: var(--content-inset-y); /* ---- Resolution policy — DECIDED 2026-07-28 (D-B) -------------------- FIXED LOGICAL TV PIXELS WITH RESOLUTION-SPECIFIC BREAKPOINTS. Percentage widths are NOT panel authority. Superseded: Live TV's 17%. 1920x1080 authoritative logical layout. All tokens above are these values. 4K retain the 1920x1080 logical layout, render at DPR2 for 3840x2160 physical. DO NOT manually double dimensions. 1280x720 use the explicit breakpoint values below. DO NOT proportionally shrink the page and DO NOT apply a whole-page scale transform. Must preserve: 44px minimum D-pad targets, readable labels, focus ring + halo clearance, sufficient main-content width. */ /* 4K — same logical values, DPR2 handles the rest. Retained for reference. */ --safe-overscan-x-4k: 96px; --safe-overscan-y-4k: 54px; --tv-safe-x-4k: 96px; --tv-safe-y-4k: 54px; /* Focus-halo overflow allowance. The ring hugs the component edge and is drawn as box-shadow, so it consumes NO layout space. This value is the external clearance needed near screen edges so the halo is not clipped. It is NOT internal padding — see the removal of --focus-pad. */ --focus-halo-overflow: 8px; /* ---- Global shell ---------------------------------------------------- The single application shell: RAIL | [optional secondary panel] | CONTENT Movies, Settings, Arena, Live TV and Library all use this same shell. */ --rail-width: 84px; /* @frozen — compact icon-only global rail */ /* Rail item footprint. --rail-item-min is the ABSOLUTE D-pad floor and must never be reduced; --rail-item is the visual target, sized above it so glyphs read at television distance. */ --rail-item-min: 44px; /* @frozen — absolute accessibility minimum */ --rail-item: 48px; /* TV-safe focus target, >= --rail-item-min */ --rail-icon-box: 48px; /* hit-target box for the glyph */ --rail-icon: 24px; /* optical glyph size inside the box */ --rail-logo: 36px; /* balanced against the nav system, not dominant */ --rail-gap: 12px; /* vertical gap between rail items */ --rail-logo-gap: 24px; /* deliberate separation, logo -> first item */ /* ---- Shell composition — MEASURED from the approved Movies screen ----- BATCH 1 FINDING 2026-07-28. The Somatro shell is NOT abutting columns. It is a set of FLOATING ROUNDED PANELS on the ambient canvas: page padding 44px rail 84px radius 24px bg rgba(16,27,43,.9) border rgba(255,255,255,.05) gap 22px panel 252px radius 22px bg rgba(11,18,30,.5) border rgba(255,255,255,.06) gap 22px content (remainder) Source: `Somatro Movies Home.dc.html`, confirmed against `Somatro_Movies_Current_Approved_1920x1080.png`. */ /* SHELL LAYOUT INSET — approved 2026-07-28. Extracted from the approved Movies screen. NOT a safe margin. Decorative shell surfaces may begin here; critical content may not (that boundary is 48/27 above). */ --shell-page-inset: 44px; --shell-gap: 22px; /* between rail, panel and content — extracted */ --rail-radius: 24px; --panel-radius: 22px; /* Back-compat aliases — prefer --shell-gap in new work. */ --rail-to-panel-gap: var(--shell-gap); --panel-to-content-gap: var(--shell-gap); --panel-gap: var(--shell-gap); /* ---- Secondary navigation panels ------------------------------------- DECIDED 2026-07-28 (D-A). Exactly TWO named widths. Never a per-page value, never a single width for everything. --panel-narrow DEFAULT. Compact secondary navigation: Movies groups, Series groups, Library categories, Settings categories, Playlist groups, ordinary filters/categories. --panel-wide ONLY where the panel is genuinely denser: Live TV group/channel navigation, long provider-supplied channel or group names, rows carrying counts, secondary labels or status. RULE: every use of --panel-wide must be a NAMED component variant, never a page-specific override. If a page needs a width, it needs a variant. VALUES ARE MEASURED, not chosen: 252px = Movies Home groups panel. Movies is the designated layout reference for every rail+panel+content page. 328px = Live TV navigation, measured at 17% of 1920 = 326.4px, rounded to the nearest 4px unit. Both are 4px-aligned (--space-1). Do not "tidy" them to rounder numbers — they match the approved screens. */ --panel-narrow: 252px; --panel-wide: 328px; /* ---- Content regions — NOT navigation panels ------------------------- Right-side detail / preview / tertiary content. The measured 520px and 560px belong HERE, not in --panel-wide. Classified per shell. @measure — confirm against the approved screens. */ --region-detail: 552px; /* now-playing / movie details panel */ --region-preview: 520px; /* EPG right-hand preview */ /* Back-compat aliases */ --panel-secondary-width: var(--panel-narrow); --panel-tertiary-width: var(--panel-narrow); --panel-detail-width: var(--region-detail); --list-col-width: var(--panel-narrow); --detail-col-width: var(--region-detail); /* ---- Row height hierarchy ------------------------------------------- Named hierarchy per spec item 10. Do not introduce unexplained heights. */ --row-compact: 56px; --row-standard: 76px; --row-category: 112px; /* two-line category row: icon + title + description + chevron. Measured worst case at --panel-wide, 4px-aligned. Never compress to --row-settings. */ --row-settings: 76px; /* SettingsRow / ValueRow */ --row-programme: 76px; /* EPG programme cell */ --row-source: 76px; /* source selection row */ --row-action: 64px; --row-keyboard: 56px; /* Back-compat aliases */ --row-height: var(--row-standard); --row-height-compact: var(--row-compact); /* ---- Controls -------------------------------------------------------- */ --control-height: 40px; /* buttons, segmented, inputs */ --button-height: 40px; --toggle-w: 52px; --toggle-h: 30px; --key-size: 56px; /* floating keyboard key */ --icon-tile: 44px; /* Icon sizes by role */ --icon-rail: 22px; --icon-row: 24px; --icon-inline: 16px; --icon-badge: 12px; /* ---- Header / content rhythm ----------------------------------------- */ --header-top-inset: 48px; --header-to-content: 32px; --section-spacing: 32px; --card-gap: 16px; --row-gap: 24px; /* ---- 720p breakpoint (D-B) ------------------------------------------- Explicit values, NOT proportional reduction. The rail and hit targets do NOT shrink — only discretionary space does. AUDIT 2026-07-28 (reports/NATIVE_720_PANEL_MEASUREMENT_AUDIT.md): No native 720p evidence exists. The apparent 1280x720 renders are 1080p frames scaled by transform:scale(0.6666667) — the technique D-B prohibits. That scaling yields a 29.3px D-pad target and 10px body text, i.e. exactly the failures the breakpoint rule prevents. Rail and hit-target values below are DERIVED FROM POLICY and safe to freeze. All panel/region/inset values are UNVERIFIED ESTIMATES pending a genuine native 1280x720 render. Do not freeze them. */ --rail-width-720: 84px; /* FROZEN — derived from policy, never shrinks */ --rail-item-720: 44px; /* FROZEN — absolute accessibility minimum */ --rail-icon-720: 22px; /* FROZEN */ --panel-narrow-720: 220px; /* UNVERIFIED ESTIMATE */ --panel-wide-720: 280px; /* UNVERIFIED ESTIMATE */ --region-detail-720: 380px; /* UNVERIFIED ESTIMATE */ --region-preview-720: 360px; /* UNVERIFIED ESTIMATE */ --safe-overscan-x-720: 32px; --safe-overscan-y-720: 18px; --content-inset-x-720: 32px; --content-inset-y-720: 18px; --panel-to-content-gap-720: 16px; /* ---- Focus ----------------------------------------------------------- */ --focus-ring-width: 2px; /* @frozen — one crisp external 2px ring */ /* --focus-pad REMOVED (spec item 12): the ring hugs the component edge and never shifts layout. Reserved internal focus padding is obsolete. Use --focus-halo-overflow for external screen-edge clearance only. */ }