/* Gate (#toggleScreen) — production sizing system.
   Layout per device class via container queries on #stage (the real viewport box):
     desktop & tablet landscape · tablet & foldable portrait · phone portrait · phone landscape.
   Units
     --gt  type/width unit, --gu  vertical-rhythm unit: design value × fluid unit, so sizes scale smoothly inside a class.
     --gfit  set by scale.js (.45 → 1.2): the largest value at which the whole gate fits its screen. Short screens shrink everything together;
             roomy screens grow it a little so the gate fills its proportion of the screen. The gate never scrolls.
   Cards: always equal height, titles top-aligned, language control always above Choose, minimum height proportional to card width. */
#toggleScreen{
  --gfit:1;
  --gt:clamp(1px,min(.06944cqw,.11111cqh),2.4px);
  --gu:clamp(.6px,min(.06944cqw,.11111cqh),2.4px);
  --t:calc(var(--gt) * var(--gfit));--u:calc(var(--gu) * var(--gfit));
  --gcol:900;--pad-y:32;--logo:56;--logo-mb:22;
  --h1:34;--sub:18;--sub-mt:10;
  --cards-mt:34;--cards-gap:28;--card-w:430;--card-min:350;--card-py:36;--card-px:32;--card-r:12;
  --title:24;--body:15;--body-mt:12;
  --pick-pt:28;--pick-h:44;--pick-w:200;--pick-fs:14;
  --btn-h:48;--btn-mt:14;--btn-fs:14;
  --pb-mt:28;--mark-w:200;--attr:12;
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;overflow:hidden;
  padding:max(calc(var(--pad-y) * var(--u)),env(safe-area-inset-top,0px)) max(var(--edge,24px),env(safe-area-inset-right,0px)) max(calc(var(--pad-y) * var(--u)),env(safe-area-inset-bottom,0px)) max(var(--edge,24px),env(safe-area-inset-left,0px));
}
#toggleScreen .fit-sizer{flex:0 0 auto;display:flex;align-items:flex-start;justify-content:center;width:100%;height:auto}
#toggleScreen .toggle-screen{display:flex;flex-direction:column;align-items:center;width:100%;max-width:calc(var(--gcol) * var(--t));height:auto;margin:0 auto;padding:0}
#toggleScreen .toggle-screen > *{flex:0 0 auto}
#toggleScreen .gate-logo{height:calc(var(--logo) * var(--u));width:auto;max-width:70%;margin:0 0 calc(var(--logo-mb) * var(--u))}
#toggleScreen .toggle-headline{font-size:calc(var(--h1) * var(--t));line-height:1.15;text-wrap:balance}
#toggleScreen .toggle-subhead{margin-top:calc(var(--sub-mt) * var(--u));font-size:calc(var(--sub) * var(--t));line-height:1.45;text-wrap:balance}
/* Card pair: shared subgrid rows (title · persona · body · free space · language · Choose), so both cards are the same height and every row lines up. */
#toggleScreen .toggle-cards{min-height:calc(var(--card-min) * var(--t));display:grid;grid-template-columns:repeat(2,minmax(0,calc(var(--card-w) * var(--t))));grid-template-rows:auto auto auto 1fr auto auto;align-content:stretch;justify-content:center;column-gap:calc(var(--cards-gap) * var(--t));row-gap:0;width:100%;margin-top:calc(var(--cards-mt) * var(--u))}
#toggleScreen .toggle-card{display:grid;grid-row:1/-1;grid-template-rows:subgrid;row-gap:0;flex:none;width:auto;height:auto;min-width:0;min-height:0;padding:calc(var(--card-py) * var(--u)) calc(var(--card-px) * var(--t));border-radius:calc(var(--card-r) * var(--t));box-shadow:0 calc(14 * var(--t)) calc(34 * var(--t)) rgba(16,24,40,.18)}
#toggleScreen .toggle-card-title{grid-row:1;align-self:start;margin:0;font-size:calc(var(--title) * var(--t));line-height:1.2;text-wrap:balance}
#toggleScreen .toggle-card-persona{grid-row:2;align-self:start;margin-top:calc(var(--body-mt) * var(--u));font-size:calc(var(--body) * var(--t))}
#toggleScreen .toggle-card-body{grid-row:3;align-self:start;margin:calc(var(--body-mt) * var(--u)) 0 0;font-size:calc(var(--body) * var(--t));line-height:1.55;text-wrap:pretty}
#toggleScreen .toggle-card > div:not([class]){grid-row:4/6;min-height:0}
#toggleScreen .toggle-language-picker{grid-row:5;align-self:end;justify-self:center;margin:0;padding-top:calc(var(--pick-pt) * var(--u))}
#toggleScreen .toggle-language-button{width:calc(var(--pick-w) * var(--t));max-width:100%;height:max(36px,calc(var(--pick-h) * var(--t)));padding:0 calc(14 * var(--t)) 0 calc(18 * var(--t));border-radius:calc(6 * var(--t));font-size:calc(var(--pick-fs) * var(--t))}
#toggleScreen .toggle-language-button svg{width:calc(14 * var(--t));height:calc(14 * var(--t))}
#toggleScreen .lang-menu{left:50%;transform:translateX(-50%);min-width:calc(var(--pick-w) * var(--t));border-radius:calc(12 * var(--t))}
#toggleScreen .lang-menu .lang-row{font-size:calc(var(--pick-fs) * var(--t));padding:calc(9 * var(--t)) calc(12 * var(--t))}
#toggleScreen .toggle-card-button,#toggleScreen .toggle-language-picker + .toggle-card-button{grid-row:6;align-self:end;width:100%;height:max(36px,calc(var(--btn-h) * var(--t)));margin-top:calc(var(--btn-mt) * var(--u));border-radius:calc(6 * var(--t));font-size:calc(var(--btn-fs) * var(--t));transition:background-color .15s,color .15s}
#toggleScreen .toggle-card-button:hover{background:#fff;color:var(--accent)}
#toggleScreen .toggle-card :focus-visible{outline:2px solid #fff;outline-offset:3px}
#toggleScreen .toggle-poweredby{width:100%;margin-top:calc(var(--pb-mt) * var(--u));gap:calc(8 * var(--u))}
#toggleScreen .toggle-poweredby .attr-mark{width:calc(var(--mark-w) * var(--t));height:calc(var(--mark-w) * .145 * var(--t))}
/* Attribution: one line, sized by scale.js to the available width. */
#toggleScreen .attribution{width:100%;max-width:100%;margin:0 auto;padding:0;font-size:calc(var(--attr) * var(--t));line-height:1.5;letter-spacing:0;white-space:nowrap;overflow:hidden;text-align:center}
/* Tablet & foldable portrait, portrait monitors. Reference 834×1194. */
@container (orientation:portrait) and (min-width:600px){
  #toggleScreen{
    --gt:clamp(.92px,min(.1199cqw,.08375cqh),1.6px);
    --gu:clamp(.6px,min(.1199cqw,.08375cqh),1.6px);
    --gcol:746;--pad-y:44;--logo:60;--logo-mb:28;
    --h1:36;--sub:19;--sub-mt:10;
    --cards-mt:44;--cards-gap:20;--card-w:363;--card-min:420;--card-py:40;--card-px:28;
    --title:26;--body:16;--body-mt:14;
    --pick-pt:30;--pick-h:46;--pick-w:210;--pick-fs:15;
    --btn-h:52;--btn-mt:16;--btn-fs:15;
    --pb-mt:40;--mark-w:210;--attr:13;
  }
}

/* Phone portrait: stacked cards, equal height. Reference 390×844. */
@container (orientation:portrait) and (max-width:599px){
  #toggleScreen{
    --gt:clamp(.9px,min(.2564cqw,.1185cqh),1.13px);
    --gu:clamp(.5px,min(.2564cqw,.1185cqh),1.15px);
    --gcol:460;--pad-y:18;--logo:40;--logo-mb:16;
    --h1:23;--sub:15;--sub-mt:6;
    --cards-mt:20;--cards-gap:14;--card-min:440;--card-py:20;--card-px:18;
    --title:20;--body:14.5;--body-mt:8;
    --pick-pt:16;--pick-h:44;--pick-w:220;--pick-fs:14.5;
    --btn-h:46;--btn-mt:12;--btn-fs:15;
    --pb-mt:20;--mark-w:150;--attr:12;
  }
  #toggleScreen .toggle-cards{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:1fr;row-gap:calc(var(--cards-gap) * var(--u))}
  #toggleScreen .toggle-card{display:flex;flex-direction:column;grid-row:auto}
  #toggleScreen .toggle-card > *{align-self:stretch}
  #toggleScreen .toggle-card > div:not([class]){flex:1 1 0}
  #toggleScreen .toggle-language-picker{align-self:center;margin-top:auto}
}

/* Phone landscape and other short landscape screens (568×320 to ~1000×559). Reference 852×393.
   Height is the scarce axis: the client logo stays above the headline (as on every layout) but compact, the column is held narrower
   than the screen (clear side margins, room for the notch), and --gfit sizes everything so the gate fills the height without touching it. */
@container (orientation:landscape) and (max-height:559px){
  #toggleScreen{
    --gt:clamp(.8px,min(.1174cqw,.2545cqh),1.3px);
    --gu:clamp(.5px,min(.1174cqw,.2545cqh),1.3px);
    --gcol:640;--pad-y:14;--logo:28;--logo-mb:8;
    --h1:22;--sub:14;--sub-mt:3;
    --cards-mt:16;--cards-gap:14;--card-w:313;--card-min:200;--card-py:16;--card-px:18;--card-r:10;
    --title:17;--body:13.5;--body-mt:6;
    --pick-pt:12;--pick-h:38;--pick-w:180;--pick-fs:13;
    --btn-h:40;--btn-mt:8;--btn-fs:13;
    --pb-mt:14;--mark-w:120;--attr:11;
    --gh:clamp(.5px,.2545cqh,1.4px);
    padding-left:max(calc(32 * var(--u)),env(safe-area-inset-left,0px));padding-right:max(calc(32 * var(--u)),env(safe-area-inset-right,0px));
  }
  #toggleScreen .toggle-headline{white-space:nowrap}
  #toggleScreen .toggle-cards{align-self:stretch;min-height:min(calc(var(--card-min) * var(--gh) * var(--gfit)),calc(var(--card-w) * .72 * var(--t)))}
  #toggleScreen .toggle-card{box-shadow:0 calc(8 * var(--t)) calc(20 * var(--t)) rgba(16,24,40,.16)}
  #toggleScreen .toggle-poweredby{gap:calc(5 * var(--u))}
}