/* LAYOUT3 (round 2): 3-step design page. Widths come from admin (Admin → טקסטים ומגבלות), written by layout3.js as
   --l3-s1 / --l3-s3 / --l3-cap (= s1 + s2max + s3). html.l3-wide is set only when the window is at least s1+s2+s3 wide;
   then step 1 = max(s1, W*s1/cap), step 3 = max(s3, W*s3/cap) and step 2 takes the rest: extra width goes to step 2 first
   until it reaches s2max, after that all three grow in the ratio s1 : s2max : s3. Narrower windows keep the old rules. */
:root{--l3-s1:390;--l3-s3:390;--l3-cap:1480}
html.l3-wide .editor{grid-template-columns:max(calc(var(--l3-s1) * 1px),calc(100% * var(--l3-s1) / var(--l3-cap))) minmax(0,1fr) max(calc(var(--l3-s3) * 1px),calc(100% * var(--l3-s3) / var(--l3-cap)))}
/* step name + its explanation on one centred line */
html.l3-on .editor .ch{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:0 8px;text-align:center}
html.l3-on .editor .ch .stp::after{content:":"}
html.l3-on .editor .ch h2{font-size:19px}
/* the design-language choice lives in step 1 only */
html.l3-on #step2 .xf-g[data-g=lang],html.l3-on #step3 .xf-g[data-g=lang],html.l3-on #step2 .langsel,html.l3-on #step3 .langsel{display:none!important}
/* step-2 footer (structure like the original site: one centred row of links, then a small © line) */
.s2foot{margin:18px 0 0;padding:14px 6px 6px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:13px;line-height:1.6}
.s2foot .s2f-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 10px}
.s2foot a{color:var(--muted);text-decoration:none}.s2foot a:hover{color:var(--teal);text-decoration:underline}
.s2foot .s2f-sep{opacity:.5}
.s2foot .s2f-copy{display:block;margin-top:4px;font-size:12px}
/* step 1: label kept for screen readers only, the placeholder carries it */
.l3-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
#fields.l3-nolabels .fld{gap:0}
/* editable dropdown (combobox) */
.l3-cbx{position:relative;display:flex;flex:1;min-width:0;align-items:center}
.l3-cbx .l3-cin{width:100%;min-width:0;padding-inline-end:36px!important}
.l3-cdrop{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0}
.l3-ghost{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;white-space:pre;overflow:hidden;border:1px solid transparent}
.l3-ghost.hidden{display:none}
.l3-gfix{visibility:hidden}.l3-ghint{color:#a0a8b0}
.l3-list{position:fixed;z-index:9000;background:#fff;border:1px solid #cfd9dc;border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.16);overflow-y:auto;overscroll-behavior:contain;padding:4px 0;-webkit-overflow-scrolling:touch}
.l3-list.hidden{display:none}
.l3-opt{min-height:44px;display:flex;align-items:center;padding:8px 14px;font-size:16px;cursor:pointer;border-top:1px solid #f0f3f4;white-space:pre-wrap}
.l3-opt:first-child{border-top:0}
.l3-opt:hover,.l3-opt:active{background:#eef6f7}
.l3-opt i{font-style:normal;color:#a0a8b0}
/* L3ORDER / L3SLOT (card #106): option text is one bidi run; centred list when the field text is centred; keyboard highlight */
.l3-opt .l3-ot{min-width:0;max-width:100%;overflow-wrap:anywhere}
.l3-list.l3-c .l3-opt{justify-content:center;text-align:center}
.l3-opt.l3-act{background:#eef6f7;box-shadow:inset 0 0 0 2px #2b8a93}
.l3-ghost .l3-ghint{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* /LAYOUT3 */