/* Welcome (#welcomeScreen) — sizing per device class via container queries on #stage:
     desktop & tablet landscape (3×2 tiles) · tablet & foldable portrait (2×3) · phone portrait (2×3) · short landscape (3×2).
   Anchors: desktop 1 at 1280–1440 wide (grows above, shrinks below 1280×800); tablet portrait ref 834×1194; phone ref 390×844.
   --wt fluid unit per class · --wsp space, --wg gaps, --wfit type: factors solved by scale.js fitWelcome so the welcome never scrolls.
   Prompts and greeting are the composer's width (--col-w). Icons always sit on their own line above the title. Nothing is clamped. */
#welcomeScreen{
  --wfit:1;--wsp:1;
  /* Desktop & tablet-landscape unit, anchored on the owner-approved references (1280×800 … 3840×2160 all read as one layout):
     1 at 1280–1440 wide, growing with the screen above (W/1440, H/900) and shrinking below 1280×800 (W/1280, H/800) so a 1024×768
     screen is the 1280 layout at 0.8 rather than a 1280 layout squeezed into 1024. */
  --wt:clamp(.7px,max(min(.06944cqw,.11111cqh),min(1px,.078125cqw,.125cqh)),2.4px);
  --k:calc(var(--wt) * var(--wfit));--ks:calc(var(--k) * var(--wsp));--wg:1;--kg:calc(var(--ks) * var(--wg));
  --tt-min:13px;--td-min:11px;
  /* Floors: greeting, orb and icons never shrink below a readable/visible size; tile text is what resizes when space runs out. */
  --g-min:24px;--orb-min:96px;--icon-min:36px;
  --wcol:1000;--wpad:12;
  --g:28;--g-lh:1.22;--g-mw:1000;
  --orb:150;--orb-mt:4;--orb-mb:18;
  --cols:3;--gap:18;--tpad:22;--tr:16;--icon:52;--icon-mb:10;--tt:18;--td:14.5;--tgap:6;
  overflow:hidden!important;justify-content:center!important;
  padding:calc(var(--wpad) * var(--kg)) max(var(--edge,16px),env(safe-area-inset-left,0px)) calc(var(--wpad) * var(--kg)) max(var(--edge,16px),env(safe-area-inset-right,0px))!important;
}
#welcomeScreen{max-width:none!important}
#welcomeScreen.scrolls{overflow:hidden!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;max-width:min(var(--col-w),calc(var(--g-mw) * var(--wt)));font-size:max(var(--g-min),calc(var(--g) * var(--k)));line-height:var(--g-lh);text-wrap:balance}
#orbWrapperLarge{width:max(var(--orb-min),calc(var(--orb) * var(--ks)));height:max(var(--orb-min),calc(var(--orb) * var(--ks)));margin:calc(var(--orb-mt) * var(--kg)) 0 calc(var(--orb-mb) * var(--kg))}
#welcomeScreen.tight #orbWrapperLarge{display:none}
#welcomeScreen.tight #welcomeHeader{margin-bottom:calc(10 * var(--ks))}
#welcomeScreen.titles-only #welcomeActions .welcome-action-sub{display:none}
#welcomeScreen.titles-only #welcomeActions .welcome-action{justify-content:center}
#welcomeActions{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:1fr;gap:max(7px,calc(var(--gap) * var(--kg)));width:100%}
#welcomeActions .welcome-action{height:100%;min-width:0;padding:clamp(9px,calc(var(--tpad) * var(--kg)),calc(var(--tpad) * var(--k)));gap:calc(var(--tgap) * var(--kg));border-radius:calc(var(--tr) * var(--k))}
#welcomeActions .welcome-action-icon{width:max(var(--icon-min),min(calc(var(--icon) * var(--ks)),calc(var(--icon) * var(--k))));height:max(var(--icon-min),min(calc(var(--icon) * var(--ks)),calc(var(--icon) * var(--k))));margin-bottom:calc(var(--icon-mb) * var(--kg));border-radius:max(6px,calc(var(--icon) * .26 * var(--ks)))}
#welcomeActions .welcome-action-icon img,#welcomeActions .welcome-action-icon svg{width:100%;height:100%}
/* Tile type follows the tile's own width (container units), so every tile on every screen keeps the same text-to-tile proportion.
   Titles are at most two lines and descriptions at most --sub-lines (two; three on phone portrait). scale.js sets one size for all six
   titles and one for all six descriptions (--tile-tt / --tile-td). */
#welcomeActions .welcome-action{container-type:inline-size}
#welcomeActions .welcome-action-title{font-size:var(--tile-tt,clamp(var(--tt-min),6.4cqi,calc(var(--tt) * 1.15 * var(--k))));line-height:1.25;text-wrap:balance}
#welcomeActions .welcome-action-sub{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible;font-size:var(--tile-td,clamp(var(--td-min),4.9cqi,calc(var(--td) * 1.1 * var(--k))));line-height:1.4;text-wrap:pretty}
/* Nothing in a tile is clamped or cut; scale.js sizes the text so titles stay within two lines and descriptions within --sub-lines. */
#welcomeActions .welcome-action-title,#welcomeActions .welcome-action-sub{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
/* Owner ruling 23 Sep 2026: the icon always sits on its own line above the title, on every device. */
#welcomeActions .welcome-action{display:flex!important;flex-direction:column;align-items:flex-start;justify-content:flex-start}
#welcomeActions .welcome-action-icon,#welcomeActions .welcome-action-title,#welcomeActions .welcome-action-sub{flex:0 0 auto;min-height:auto;max-height:none;height:auto}

/* Tablet & foldable portrait, portrait monitors. Reference 834×1194. */
@container (orientation:portrait) and (min-width:600px){
  #welcomeScreen{
    --wt:clamp(.92px,min(.1199cqw,.08375cqh),1.6px);
    --wcol:760;--wpad:16;
    --g:27;--g-mw:760;
    --orb:130;--orb-mb:20;
    --cols:2;--gap:16;--tpad:22;--tr:14;--icon:50;--icon-mb:10;--tt:18;--td:15;
    --g-min:22px;--orb-min:88px;--icon-min:36px;
  }
}

/* Phone portrait. Reference 390×844. */
@container (orientation:portrait) and (max-width:599px){
  #welcomeScreen{
    --wt:clamp(.85px,.2564cqw,1.13px);
    --wcol:460;--wpad:10;
    --g:19;--g-lh:1.3;--g-mw:380;
    --orb:92;--orb-mt:4;--orb-mb:14;
    --cols:2;--gap:10;--tpad:12;--tr:14;--icon:32;--icon-mb:4;--tt:14.5;--td:12.5;--tgap:4;
    --tt-min:13px;--td-min:11px;--sub-lines:3;
    --g-min:16px;--orb-min:56px;--icon-min:26px;
  }
  #welcomeActions .welcome-action{box-shadow:none;padding:max(9px,calc(var(--tpad) * var(--kg)))}
  #welcomeActions .welcome-action-icon{width:max(var(--icon-min),min(calc(var(--icon) * var(--ks)),calc(var(--icon) * 1.35 * var(--k))));height:max(var(--icon-min),min(calc(var(--icon) * var(--ks)),calc(var(--icon) * 1.35 * var(--k))))}
}

/* Phone landscape and other short landscape screens. Reference 852×393. */
@container (orientation:landscape) and (max-height:559px){
  #welcomeScreen{
    --wt:clamp(.8px,min(.1174cqw,.2545cqh),1.3px);
    --wcol:800;--wpad:8;
    --g:19;--g-lh:1.25;--g-mw:760;
    --orb:46;--orb-mt:4;--orb-mb:10;
    --cols:3;--gap:8;--tpad:10;--tr:12;--icon:28;--icon-mb:4;--tt:13;--td:11.5;--tgap:2;
    --tt-min:12.5px;--td-min:10.5px;
    --g-min:14px;--orb-min:32px;--icon-min:22px;
  }
  #welcomeActions .welcome-action{box-shadow:none}
}

/* 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)}



/* 360px and narrower (SE 1st gen, Fold cover, small Androids): descriptions may use 10.5px so they stay within three lines. */
@container (orientation:portrait) and (max-width:360px){ #welcomeScreen{--td-min:10.5px;--g-min:15px} }
/* Short phones (≤700px tall): the orb may go a little smaller before anything else gives. */
/* Short phones (iPhone SE 1st–3rd gen, ≤700px tall): their own anchor sizes, so the solver starts close to what fits instead of
   squeezing the tall-phone layout. */
@container (orientation:portrait) and (max-width:599px) and (max-height:700px){ #welcomeScreen{--g:18;--orb:64;--orb-mt:2;--orb-mb:10;--icon:28;--icon-mb:4;--tpad:10;--gap:8;--tgap:3;--orb-min:52px;--icon-min:24px} }
/* iPhone SE 1st gen (320×568): compact anchors — smaller orb and gaps, descriptions two lines at 10.5px — so all six descriptions fit. */
@container (orientation:portrait) and (max-width:340px) and (max-height:600px){ #welcomeScreen{--g:16;--orb:48;--orb-mt:0;--orb-mb:6;--icon:24;--icon-mb:2;--tpad:8;--gap:6;--tgap:2;--orb-min:40px;--icon-min:22px;--g-min:14px;--sub-lines:4} }
/* 340px and narrower: the greeting and tiles take 8px more width each side. */
@container (max-width:340px){ #welcomeScreen{padding-left:max(10px,env(safe-area-inset-left,0px))!important;padding-right:max(10px,env(safe-area-inset-right,0px))!important} }

/* Short landscape: tile padding and gaps may go a little tighter than on portrait phones. */
@container (orientation:landscape) and (max-height:559px){
  #welcomeActions{gap:max(6px,calc(var(--gap) * var(--kg)))}
  #welcomeActions .welcome-action{padding:clamp(7px,calc(var(--tpad) * var(--kg)),calc(var(--tpad) * var(--k)))}
}

/* Tile height set by scale.js growTiles (desktop/tablet spare height goes to the tiles). */
#welcomeActions .welcome-action{min-height:var(--tile-minh,0px)}
/* Last step before anything is hidden: tile type may go smaller (titles 11.5px, descriptions 9.5px, four lines). */
#welcomeScreen.small-text{--tt-min:11.5px;--td-min:9.5px;--sub-lines:4}
@container (max-width:340px){ #welcomeScreen.small-text{--tt-min:11px;--td-min:9px;--sub-lines:5} }

/* 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(--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}}