/* Opening screen (#welcomeScreen): one fluid system (Ryan, 16 Oct 2026: descriptions on every screen but a phone; text, headings and icons resize; "set and forget"). It replaces the thirteen screen groups of the opening screen lab (9 to 13 Oct). 1. ARRANGEMENT follows the room AiOS has, read by scale.js (measureStage) and written on #aiosShell as data-os-layout: phone (two across, headings only), short (headings only), portrait (two across), landscape (three across, two under 820 wide) and ultrawide (a wider column). Descriptions show in every arrangement but phone and short. 2. SIZES are smooth formulas of one measure of that room, --m (scale.js): the smaller of its width and 1.6 times its height, at 100 percent zoom (on phones, its height). Each size runs in a straight line through Ryan's lab values at a room of 840 (the widget's panel on a laptop) and 1,728 (a 1920 by 1080 monitor), grows in proportion above that to twice the 1,728 size, and never drops below its floor. Nothing jumps as a window is dragged. 3. FIT (scale.js, fitOpening): one number, --os-z, scales every size together, up to fill the room (to --g-grow) or down so it fits (to a 12px description and 13px heading); the orb, icons, padding and gaps ease first. Only past that does the welcome line keep one line. The orb and the descriptions never go. The character limits on headings, descriptions and the welcome line (tenant console) keep real content inside that. 4. SPARE ROOM at the largest size goes to the boxes, the orb, then the gaps; what is left centres the opening. To change a size: change its two values below (at 840 and at 1,728); the slope is the difference over 888. */ #welcomeScreen{ overflow:hidden!important;justify-content:center!important;max-width:none!important; padding-left:max(var(--edge,16px),env(safe-area-inset-left,0px))!important;padding-right:max(var(--edge,16px),env(safe-area-inset-right,0px))!important; } #welcomeScreen::before,#welcomeScreen::after{content:none} #welcomeScreen .welcome-sizer{flex:0 0 auto;min-height:0;height:auto;padding:0;align-items:flex-start} /* Owner ruling 23 Sep 2026: the prompts are exactly the composer's width (the shell's --col-w), never wider. */ #welcomeScreen .welcome-fit{margin:0 auto;width:100%;max-width:var(--col-w)} #welcomeHeader{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible;text-wrap:balance} #welcomeActions{display:grid} #welcomeActions .welcome-action{display:flex!important;min-width:0;flex-direction:column} #welcomeActions .welcome-action-icon img,#welcomeActions .welcome-action-icon svg{width:100%;height:100%} /* Nothing in a box is clamped or cut. */ #welcomeActions .welcome-action-title,#welcomeActions .welcome-action-sub{-webkit-line-clamp:unset;line-clamp:unset;overflow:visible} #welcomeActions .welcome-action-icon,#welcomeActions .welcome-action-title,#welcomeActions .welcome-action-sub{flex:0 0 auto;min-height:auto;max-height:none;height:auto} /* Stage height follows the visual viewport (scale.js sets --vvh), so the software keyboard never covers the welcome or composer. */ #stage{height:var(--vvh,100dvh);position:relative;top:var(--vvt,0px)} /* ---- The sizes. ---- Unitless pixels, multiplied by --os-z below. Landscape, portrait and ultrawide: a straight line from the value at a room of 840 to the value at 1,728, in proportion above, held between a floor and twice the 1,728 value. size at 840 at 1,728 floor welcome line 24 30 20 heading 16 20 14 description 13.5 15 12.5 orb 96 150 64 icon 38 56 30 box padding 14 20 12 gap between 10 18 8 icon to heading 10 13 8 orb spacing 14 20 10 */ #aiosShell #welcomeScreen{ --g-greet:clamp(20,max(calc(24 + (var(--m,1440) - 840) * .006757),calc(30 * var(--m,1440) / 1728)),60); --g-head:clamp(14,max(calc(16 + (var(--m,1440) - 840) * .004505),calc(20 * var(--m,1440) / 1728)),40); --g-desc:clamp(12.5,max(calc(13.5 + (var(--m,1440) - 840) * .001689),calc(15 * var(--m,1440) / 1728)),30); --g-orb:clamp(64,max(calc(96 + (var(--m,1440) - 840) * .06081),calc(150 * var(--m,1440) / 1728)),300); --g-icon:clamp(30,max(calc(38 + (var(--m,1440) - 840) * .02027),calc(56 * var(--m,1440) / 1728)),112); --g-pad:clamp(12,max(calc(14 + (var(--m,1440) - 840) * .006757),calc(20 * var(--m,1440) / 1728)),40); --g-gap:clamp(8,max(calc(10 + (var(--m,1440) - 840) * .009009),calc(18 * var(--m,1440) / 1728)),36); --g-icon-gap:clamp(8,max(calc(10 + (var(--m,1440) - 840) * .003378),calc(13 * var(--m,1440) / 1728)),26); --g-orb-space:clamp(10,max(calc(14 + (var(--m,1440) - 840) * .006757),calc(20 * var(--m,1440) / 1728)),40); --g-grow:1.4;--g-fill:.97;--os-head-align:center;--os-head-text:center; } /* Portrait rooms (tablets held upright) grow further into their height. */ #aiosShell[data-os-layout="portrait"] #welcomeScreen{--g-grow:1.5} /* Phones: headings only, two across, the room's height as the measure, from Ryan's phone values at 568 tall to those at 844 (welcome line 16 to 22, orb 50 to 136, icon 26 to 40, heading 12 to 15), filling 99 percent of the height (9 Oct 2026). */ #aiosShell[data-os-layout="phone"] #welcomeScreen{ --g-greet:clamp(16,calc(16 + (var(--m,700) - 568) * .02174),22); --g-head:clamp(12,calc(12 + (var(--m,700) - 568) * .01087),15); --g-desc:13; --g-orb:clamp(50,calc(50 + (var(--m,700) - 568) * .3116),136); --g-icon:clamp(26,calc(26 + (var(--m,700) - 568) * .05072),40); --g-pad:clamp(8,calc(8 + (var(--m,700) - 568) * .02174),14); --g-gap:clamp(8,calc(8 + (var(--m,700) - 568) * .007246),10); --g-icon-gap:clamp(8,calc(8 + (var(--m,700) - 568) * .007246),10); --g-orb-space:clamp(12,calc(12 + (var(--m,700) - 568) * .02174),18); --g-grow:1.8;--g-fill:.99; } /* A phone or small tablet on its side: headings only, Ryan's values for it. */ #aiosShell[data-os-layout="short"] #welcomeScreen{--g-greet:16;--g-head:14;--g-desc:13;--g-orb:40;--g-icon:24;--g-pad:6;--g-gap:6;--g-icon-gap:6;--g-orb-space:6;--g-grow:1.5;--g-fill:1} /* Ultrawide (2.1 : 1 and wider): a column of 60 percent of the room (Ryan, 13 Oct: on a 3840 by 1440 window "the answer canvas is too condensed"). */ @container (width >= 1600px) and (aspect-ratio >= 2.1/1){#stage #aiosShell{--col-w:min(calc(100cqw - 2 * var(--edge)),60cqw)}} /* ---- Applying a group's sizes. ---- */ #aiosShell #welcomeScreen{ --z:var(--os-z,1);--e:var(--os-e,1);--air:var(--os-air,1); --os-u:calc(var(--z) * 1px); --os-greet:calc(var(--g-greet,22) * var(--os-u)); --os-head:calc(var(--g-head,15) * var(--os-u)); --os-desc:calc(var(--g-desc,13) * var(--os-u)); --os-orb-i:calc(var(--g-orb,120) * var(--os-u)); --os-icon-i:calc(var(--g-icon,40) * var(--os-u)); --os-pad-i:calc(var(--g-pad,16) * var(--os-u)); --os-gap-i:calc(var(--g-gap,12) * var(--os-u)); --os-icon-gap-i:calc(var(--g-icon-gap,10) * var(--os-u)); --os-space-i:calc(var(--g-orb-space,16) * var(--os-u)); --os-orb:calc(max(min(44px,var(--os-orb-i)),calc(var(--os-orb-i) * (.34 + .66 * var(--e)))) * var(--os-orb-plus,1)); --os-icon:max(min(32px,var(--os-icon-i)),calc(var(--os-icon-i) * (.82 + .18 * var(--e)))); --os-icon-gap:max(min(8px,var(--os-icon-gap-i)),calc(var(--os-icon-gap-i) * (.8 + .2 * var(--e)))); --os-tpad:max(min(12px,var(--os-pad-i)),calc(var(--os-pad-i) * (.75 + .25 * var(--e)))); --os-rpad:max(min(8px,var(--os-pad-i)),calc(var(--os-pad-i) * .6)); --os-gap:calc(max(min(8px,var(--os-gap-i)),calc(var(--os-gap-i) * (.7 + .3 * var(--e)))) * var(--air)); --os-g1:calc(var(--os-space-i) * .7 * (.5 + .5 * var(--e)) * var(--air)); --os-g2:calc(var(--os-space-i) * (.5 + .5 * var(--e)) * var(--air)); --os-pad:calc(12 * var(--os-u) * (.5 + .5 * var(--e))); --os-head-gap:calc(var(--os-head) * .3); --os-radius:calc(var(--os-pad-i) * .85); padding-top:var(--os-pad)!important;padding-bottom:var(--os-pad)!important; } #aiosShell #welcomeScreen.os-scroll{overflow-y:auto!important;justify-content:flex-start!important} /* A look may make the welcome line larger (looks.css sets --look-greet-scale). */ #aiosShell #welcomeScreen #welcomeHeader{font-size:calc(var(--os-greet) * var(--look-greet-scale,1));line-height:var(--look-greet-lh,1.22);max-width:min(var(--col-w),34em);margin:0} #aiosShell #welcomeScreen #orbWrapperLarge{width:var(--os-orb);height:var(--os-orb);margin:var(--os-g1) 0 var(--os-g2)} /* The orb beside the welcome line (Ryan's favourite opening, the assembler's banner look, 14 and 15 Oct 2026): where the room is too short for the orb on its own row, it sits left of the welcome line at about the welcome line's height, and keeps it. */ #aiosShell #welcomeScreen{--os-orb-beside:calc(var(--os-greet) * 3);--os-beside-gap:calc(var(--os-greet) * .75)} #aiosShell #welcomeScreen[data-os-orb="beside"] .welcome-hero{flex-direction:row;align-items:center;justify-content:center;gap:var(--os-beside-gap);margin-bottom:var(--os-g2)} #aiosShell #welcomeScreen[data-os-orb="beside"] #orbWrapperLarge{order:-1;width:var(--os-orb-beside);height:var(--os-orb-beside);margin:0;flex:0 0 auto} #aiosShell #welcomeScreen[data-os-orb="beside"] #welcomeHeader{text-align:left;max-width:min(calc(var(--col-w) - var(--os-orb-beside) - var(--os-beside-gap)),34em)} #aiosShell #welcomeScreen #welcomeActions{grid-template-columns:repeat(var(--os-cols,2),minmax(0,1fr));grid-auto-rows:1fr;gap:var(--os-gap);width:100%} #aiosShell #welcomeScreen #welcomeActions .welcome-action{padding:calc(var(--os-tpad) + var(--os-tile-padv,0px)) var(--os-tpad);gap:0;border-radius:var(--os-radius);min-height:var(--os-tile-minh,0px);height:100%;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left} /* Icon and heading with no description: where the pair sits in its box is the group's setting (--os-head-align: center or flex-start, with --os-head-text: center or left). */ #aiosShell #welcomeScreen:not([data-os="full"]) #welcomeActions .welcome-action{justify-content:center;align-items:var(--os-head-align,center);text-align:var(--os-head-text,center)} #aiosShell #welcomeScreen #welcomeActions .welcome-action-icon{width:var(--os-icon);height:var(--os-icon);margin:0 0 var(--os-icon-gap);border-radius:calc(var(--os-icon) * .26);flex:0 0 auto} /* A prompt with no icon keeps the icon's place, unseen, so the headings still line up; when no prompt has one, the row goes. */ #aiosShell #welcomeScreen #welcomeActions .welcome-action-icon:empty{background:none;box-shadow:none;border-color:transparent} #aiosShell #welcomeScreen #welcomeActions:not(:has(.welcome-action-icon:not(:empty))) .welcome-action-icon{display:none} #aiosShell #welcomeScreen #welcomeActions .welcome-action-title{font-size:var(--os-head);line-height:1.25;margin:0;max-width:100%;overflow-wrap:normal;text-wrap:balance} /* Only on a window too small for everything, where the prompts scroll: a word longer than its box may break rather than spill. */ #aiosShell #welcomeScreen.os-scroll #welcomeActions .welcome-action-title{overflow-wrap:anywhere} #aiosShell #welcomeScreen #welcomeActions .welcome-action-sub{font-size:var(--os-desc);line-height:1.4;margin:var(--os-head-gap) 0 0;display:block;max-width:100%;overflow-wrap:break-word;text-wrap:pretty} #aiosShell #welcomeScreen:not([data-os="full"]) #welcomeActions .welcome-action-sub{display:none} /* Icons line up across the boxes and headings start on one line: every heading takes the height of the tallest (scale.js). */ #aiosShell #welcomeScreen:not([data-os="full"]) #welcomeActions .welcome-action-title{min-height:var(--os-title-minh,0px)} /* A stable native button owns pointer/touch/keyboard activation; only its SVG spins. */ #orbWrapperLarge{padding:0;border:0;background:transparent;color:inherit;animation:none;flex-shrink:0} #orbWrapperLarge svg{animation:aiosOrbSpin 28s linear infinite} #orbWrapperLarge.orb-listening svg{animation-duration:6s} #orbWrapperLarge.orb-listening circle{fill:var(--voice-listening,#22C55E);animation-duration:.9s} #orbWrapperLarge.orb-speaking svg{animation-duration:12s} #orbWrapperLarge.orb-speaking circle{fill:var(--orb-colour,var(--accent));animation-duration:1.4s} @media(prefers-reduced-motion:reduce){#orbWrapperLarge svg{animation:none}} /* Starter tiles wear the answer-card outline and shadow (owner ruling 24 Sep 2026). One even 1px accent line (no gradient: across a wide tile a gradient reads as a colour drift). */ #welcomeActions .welcome-action{border:1px solid color-mix(in srgb,var(--accent) 30%,#fff);background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.05),0 10px 24px -14px color-mix(in srgb,var(--accent) 45%,transparent);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} #welcomeActions .welcome-action:hover{transform:translateY(-2px);background:#fff;border-color:color-mix(in srgb,var(--accent) 55%,#fff);box-shadow:0 2px 4px rgba(16,24,40,.06),0 16px 32px -14px color-mix(in srgb,var(--accent) 55%,transparent)} @media (prefers-reduced-motion:reduce){#welcomeActions .welcome-action:hover{transform:none}}