/* THE LANGUAGE PAGE, generated from _preview/language-mockup.html by
   scratchpad/gift/mklangport.py. DO NOT EDIT BY HAND: change the mockup and re-run it.
   Scoped under .lga (x4, to out-rank the app's own #prefsHub rules); the mockup's body.phone is
   .lga.ph here.
   ⚠️ THE ROWS, PANELS AND SECTION LABELS ARE NOT IN THIS FILE. They are in accessibility-page.css
   under .aca, and this page's root element wears both classes - so that sheet must stay linked
   ABOVE this one. portlang.py checks it on every run. */

.lga{
  /* the mockup's radius token, said in the app's own. --r is Arthur's corner size and moves with
     the Appearance page's corners slider, so the picker rounds with everything else. */
  --Rm: var(--r, 11px);
}

.lga.lga.lga.lga{--T:1; --W:0; --L:1.5; --Rm:11px}
.lga.lga.lga.lga .subhead{margin:0 0 6px;font-size:calc(21px * var(--T));font-weight:calc(800 + var(--W));letter-spacing:-.4px}
.lga.lga.lga.lga .lglead{margin:0 0 26px;color:var(--dim);font-size:calc(13.5px * var(--T));line-height:var(--L);max-width:58ch}
.lga.lga.lga.lga .acsec{margin-top:34px}
.lga.lga.lga.lga .lgsub{margin:-6px 0 12px;color:var(--dim);font-size:calc(13px * var(--T));line-height:var(--L)}
.lga.lga.lga.lga .lgpick{position:relative;width:100%;display:flex;align-items:center;gap:12px;cursor:pointer; border:0;text-align:left;color:inherit; background:var(--panel);box-shadow:inset 0 0 0 1px var(--line2); border-radius:calc(var(--Rm) + 3px);padding:calc(16px * var(--acTap,1)) 18px; font-size:calc(14px * var(--T));transition:background .14s,box-shadow .14s}
.lga.lga.lga.lga .lgpick:hover{background:var(--panel2)}
.lga.lga.lga.lga .lgpick[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--accent)}
.lga.lga.lga.lga .lgtx{flex:1;min-width:0}
.lga.lga.lga.lga .lgpick b, .lga.lga.lga.lga .lgopt b{display:block;font-weight:calc(700 + var(--W));font-size:calc(14.5px * var(--T))}
.lga.lga.lga.lga .lgname{display:flex;align-items:baseline;gap:8px;min-width:0}
.lga.lga.lga.lga .lgopt .lgname b, .lga.lga.lga.lga .lgpick .lgname b{flex:0 1 auto; min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lga.lga.lga.lga .lgen{flex:none;font-style:normal;color:var(--dim); font-size:calc(12.5px * var(--T));font-weight:calc(500 + var(--W))}
.lga.lga.lga.lga .lgen:empty{display:none}
.lga.lga.lga.lga .lgsay{display:block;margin-top:3px;color:var(--mid); font-size:calc(13px * var(--T));line-height:var(--L)}
.lga.lga.lga.lga .lgnow{flex:none;color:var(--dim);font-size:calc(13px * var(--T)); font-weight:calc(700 + var(--W));font-variant-numeric:tabular-nums}
.lga.lga.lga.lga .lgtick{flex:none;width:18px;height:18px;border-radius:50%;background:var(--accent); position:relative}
.lga.lga.lga.lga .lgtick::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px; border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.lga.lga.lga.lga .lgval{color:var(--dim);font-size:calc(13px * var(--T));font-weight:calc(600 + var(--W))}
.lga.lga.lga.lga .lgchev{width:18px;height:18px;flex:none;fill:none;stroke:var(--dim);stroke-width:2; stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--ease)}
.lga.lga.lga.lga .lgpick[aria-expanded="true"] .lgchev{transform:rotate(180deg)}
.lga.lga.lga.lga .lgflag{flex:none;min-width:26px;padding:3px 6px;border-radius:5px;text-align:center; background:var(--panel3);box-shadow:inset 0 0 0 1px var(--line2);color:var(--mid); font-size:calc(10px * var(--T));font-weight:calc(800 + var(--W));letter-spacing:.4px}
.lga.lga.lga.lga .lglist{margin-top:6px;border-radius:var(--Rm);overflow:auto; max-height:min(52vh,420px);overscroll-behavior:contain; background:var(--panel);box-shadow:inset 0 0 0 1px var(--line2)}
.lga.lga.lga.lga .lglist[hidden]{display:none}
.lga.lga.lga.lga .lglist::-webkit-scrollbar{width:10px}
.lga.lga.lga.lga .lglist::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px; border:3px solid var(--panel)}
.lga.lga.lga.lga .lglist::-webkit-scrollbar-track{background:transparent}
.lga.lga.lga.lga .lgfindwrap{position:sticky;top:0;z-index:2;padding:10px;background:var(--panel); box-shadow:inset 0 -1px 0 var(--line)}
.lga.lga.lga.lga .lgfind{width:100%;box-sizing:border-box;border:0;outline:0;color:inherit;font:inherit; background:var(--panel3);box-shadow:inset 0 0 0 1px var(--line2); border-radius:8px;padding:calc(9px * var(--acTap,1)) 12px;font-size:calc(13.5px * var(--T))}
.lga.lga.lga.lga .lgfind:focus{box-shadow:inset 0 0 0 1px var(--accent)}
.lga.lga.lga.lga .lgfind::placeholder{color:var(--dim)}
.lga.lga.lga.lga .lgfind::-webkit-search-cancel-button{-webkit-appearance:none}
.lga.lga.lga.lga .lggrp{margin:0;padding:15px 18px 9px;color:var(--dim); font-size:calc(10.5px * var(--T));font-weight:calc(800 + var(--W));letter-spacing:.9px}
.lga.lga.lga.lga .lggrp[hidden], .lga.lga.lga.lga .lgnone[hidden], .lga.lga.lga.lga .lgopt[hidden]{display:none}
.lga.lga.lga.lga .lgnone{margin:0;padding:24px 18px;color:var(--dim);font-size:calc(13px * var(--T))}
.lga.lga.lga.lga .lgopt{width:100%;display:flex;align-items:center;gap:12px;cursor:pointer;border:0; text-align:left;color:inherit;background:none; padding:calc(14px * var(--acTap,1)) 18px;font-size:calc(14px * var(--T))}
.lga.lga.lga.lga .lgopt + .lgopt{box-shadow:inset 0 1px 0 var(--line)}
.lga.lga.lga.lga .lgopt:hover{background:var(--panel2)}
.lga.lga.lga.lga .lgopt b{flex:1;min-width:0;font-weight:calc(700 + var(--W))}
.lga.lga.lga.lga .lgopt[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.lga.lga.lga.lga .lgradio{display:flex;align-items:center;gap:13px;cursor:pointer; padding:calc(12px * var(--acTap,1)) 4px}
.lga.lga.lga.lga .lgradio input{position:absolute;opacity:0;width:0;height:0}
.lga.lga.lga.lga .lgradio i{flex:none;width:19px;height:19px;border-radius:50%; box-shadow:inset 0 0 0 2px var(--line2);transition:box-shadow .14s}
.lga.lga.lga.lga .lgradio:hover i{box-shadow:inset 0 0 0 2px var(--mid)}
.lga.lga.lga.lga .lgradio input:checked + i{box-shadow:inset 0 0 0 6px var(--accent)}
.lga.lga.lga.lga .lgradio input:focus-visible + i{outline:2px solid var(--accent-lt);outline-offset:2px}
.lga.lga.lga.lga .lgradio .act{flex:1;min-width:0}
.lga.lga.lga.lga .lgradio b{display:block;font-size:calc(14px * var(--T));font-weight:calc(600 + var(--W))}
.lga.lga.lga.lga .lgradio small{display:block;margin-top:2px;color:var(--dim); font-size:calc(12.5px * var(--T));line-height:var(--L)}
.lga.lga.lga.lga .lgeg{flex:none;color:var(--mid);font-size:calc(13px * var(--T));font-weight:calc(700 + var(--W)); font-variant-numeric:tabular-nums}
.lga.lga.lga.lga.ph .lgpick, .lga.lga.lga.lga.ph .lgopt{padding-left:14px;padding-right:14px}
.lga.lga.lga.lga.ph .lgeg{font-size:calc(12.5px * var(--T))}