#settings .sheet-head{justify-content:space-between}
#settings .head-row{display:flex;align-items:center;justify-content:space-between;width:100%}

.icon-btn{
  width:36px;height:36px;flex:0 0 36px;
  border-radius:var(--r-sm);
  display:grid;place-items:center;
  color:var(--mute);
  border:1px solid var(--edge);background:var(--raise);
  background-image:var(--face);
  box-shadow:var(--depth-1);
  transition:transform .16s var(--spring),color .16s ease,background-color .16s ease
}
.icon-btn:active{transform:scale(.93);background:var(--press);color:var(--ink)}
.icon-btn .nv-icon{width:18px;height:18px}

@media (max-width:899px), (pointer:coarse){
  #closeSettings{display:none}
}

.set-group{margin:0 0 22px}
.set-label{font-family:var(--f-head);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin:0 0 10px}
:root[lang="ar"] .set-label,
:root[lang="aii"] .set-label{font-family:inherit;letter-spacing:0;font-size:11px;
  text-transform:none;font-weight:600}
.set-hint{font-size:12px;line-height:1.5;color:var(--mute);margin:10px 0 0}

.set-switch{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;padding:14px 16px;text-align:start;
  background:transparent;border:0;color:var(--ink);
  transition:background-color .16s ease
}
.set-switch + .set-switch,
.set-switch + .set-row,
.set-row + .set-switch{border-block-start:1px solid var(--edge)}
.set-switch:active{background:var(--press)}
.set-switch .set-row-txt{gap:3px}
.set-switch .nm{font-size:15px;font-weight:600;line-height:1.3;color:var(--ink)}
.set-switch .sub{font-size:12.5px;line-height:1.45;color:var(--mute)}

.set-toggle{
  flex:0 0 auto;position:relative;inline-size:46px;block-size:28px;
  border-radius:999px;border:1px solid var(--edge);background:var(--press);
  transition:background-color .18s ease,border-color .18s ease
}
.set-toggle::after{
  content:"";position:absolute;inset-block-start:3px;inset-inline-start:3px;
  inline-size:20px;block-size:20px;border-radius:50%;
  background:var(--ink);opacity:.55;
  transition:transform .18s cubic-bezier(.4,0,.2,1),opacity .18s ease
}
.set-switch[aria-pressed="true"] .set-toggle{
  background:var(--cta-press);border-color:var(--accent-soft)
}
.set-switch[aria-pressed="true"] .set-toggle::after{
  background:var(--sodium);opacity:1;transform:translateX(18px)
}
:root[dir="rtl"] .set-switch[aria-pressed="true"] .set-toggle::after{
  transform:translateX(-18px)
}
.set-switch[hidden]{display:none}

.segment{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  padding:5px;border-radius:var(--r-ctl);background:var(--asphalt);
  border:1px solid var(--edge);box-shadow:var(--depth-in)}
.segment button{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:11px 6px;border-radius:var(--r-sm);
  font-size:12px;font-weight:600;line-height:1.2;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--mute);
  transition:background-color .16s ease,color .16s ease,transform .16s var(--spring)}
.segment button .nv-icon{width:17px;height:17px}
.segment button.on{background:var(--raise);background-image:var(--face);
  color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--edge),var(--depth-1)}
.segment button.on .nv-icon{color:var(--sodium)}
.segment button:active{transform:scale(.96)}

.segment.segment-sm{
  margin-top:8px;padding:4px;gap:5px;
  grid-template-columns:repeat(3,1fr)
}
.segment.segment-sm button{
  flex-direction:column;gap:3px;padding:9px 4px;
  font-size:11px;font-weight:600
}
.segment.segment-sm .lang-code{
  font-family:var(--f-mono);
  font-size:12px;font-weight:600;letter-spacing:.08em;line-height:1
}
.segment.segment-sm .lang-name{
  font-size:10px;font-weight:500;opacity:.75;line-height:1.2;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.segment.segment-sm button[data-lang="ar"] .lang-name{
  font-family:"SF Arabic","Geeza Pro","Noto Naskh Arabic",sans-serif;
  font-size:11px
}
.segment.segment-sm button[data-lang="aii"] .lang-name{
  font-family:"Noto Sans Syriac Eastern","Noto Sans Syriac",
    "Estrangelo Edessa","East Syriac Adiabene",sans-serif;
  letter-spacing:0;font-size:12px
}

.lang-head{display:flex;align-items:center;justify-content:center;gap:5px}
.lang-head .nv-icon{width:13px;height:13px;opacity:.8}

.update-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 16px;border-radius:var(--r-ctl);
  background:var(--asphalt);border:1px solid var(--edge)}
.update-row .txt{min-width:0}
.update-row .nm{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.update-row .ver{display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;
  margin-top:3px;font-size:10px;line-height:1.45;color:var(--mute);
  font-family:var(--f-mono);letter-spacing:.04em;
  overflow:hidden}
.update-row .ver[data-stale="1"]{color:var(--sodium)}
.update-row .ver[data-stale="2"]{color:var(--heavy)}

.update-row[data-must="1"]{
  border-color:color-mix(in srgb,var(--heavy) 45%,transparent);
  background:color-mix(in srgb,var(--heavy) 8%,var(--asphalt))
}
#updateApp{flex:0 0 auto;padding:11px 16px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  line-height:1.25;
  font-size:13px;font-weight:500;letter-spacing:.01em;
  color:var(--sodium);background:var(--cta-fill);
  border:1px solid var(--sodium);
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb,#ffffff 14%,transparent),transparent 52%),
    linear-gradient(180deg,
      rgba(0,0,0,.10),rgba(0,0,0,0) 46%,
      color-mix(in srgb,#ffffff 6%,transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#ffffff 26%,transparent),
    inset 0 -1px 0 rgba(0,0,0,.16),
    inset 0 0 0 2px color-mix(in srgb,var(--sodium) 12%,transparent),
    inset 0 3px 5px -2px rgba(0,0,0,.16),
    var(--depth-1);
  transition:transform .16s var(--spring),background-color .16s ease,
             box-shadow .16s ease}
#updateApp:active{
  transform:scale(.95);
  background:var(--cta-press);
  background-image:
    linear-gradient(180deg,
      rgba(0,0,0,.12),rgba(0,0,0,0) 52%,
      color-mix(in srgb,#ffffff 5%,transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#ffffff 9%,transparent),
    inset 0 0 0 2px color-mix(in srgb,var(--sodium) 16%,transparent),
    inset 0 4px 7px -2px rgba(0,0,0,.22)
}
#updateApp:disabled{opacity:.6;background:var(--raise);color:var(--mute);
  box-shadow:none;transform:none}

.set-foot{margin:26px 0 0;font-size:11px;line-height:1.65;color:var(--mute)}
.set-foot + .set-foot{margin-top:10px}
.set-foot b{color:var(--ink);font-weight:600}

.set-credits{margin-top:26px;padding-top:16px;border-block-start:1px solid var(--edge)}
.set-credits .set-foot:first-child{margin-top:0}


.set-stack{position:relative}

@keyframes set-in-push{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes set-in-pop{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.set-page.in-push{animation:set-in-push .18s var(--spring) both}
.set-page.in-pop{animation:set-in-pop .18s var(--spring) both}
:root[dir="rtl"] .set-page.in-push{animation-name:set-in-pop}
:root[dir="rtl"] .set-page.in-pop{animation-name:set-in-push}
@media (prefers-reduced-motion:reduce){
  .set-page.in-push,.set-page.in-pop{animation:none}
}

.icon-btn[hidden]{display:none}

#settings .head-row{gap:10px;padding-block:2px 4px}
#settings .head-row h2{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
#settings .sheet-head{padding-block-end:18px}

#settings{block-size:min(74dvh,627px,var(--sheet-ceiling))}

#settings .sheet-body{display:flex;flex-direction:column}
#settings .set-stack{flex:1 1 auto;min-height:0}

.set-nav{
  display:flex;flex-direction:column;
  border:1px solid var(--edge);border-radius:var(--r-lg);
  background:var(--raise);background-image:var(--face);
  box-shadow:var(--depth-1);
  overflow:hidden
}

.set-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;padding:15px 16px;text-align:start;
  background:transparent;border:0;color:var(--ink);
  transition:background-color .16s ease
}
.set-row + .set-row{border-block-start:1px solid var(--edge)}
.set-row:active{background:var(--press)}

.set-row-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.set-row .nm{font-size:15px;font-weight:600;line-height:1.3;color:var(--ink)}
.set-row .sub{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
  font-size:12.5px;line-height:1.45;color:var(--mute)
}
.set-row .sub[data-stale="1"]{color:var(--sodium)}
.set-row .sub[data-stale="2"]{color:var(--heavy)}
.set-row[data-must="1"]{box-shadow:inset 3px 0 0 var(--heavy)}
:root[dir="rtl"] .set-row[data-must="1"]{box-shadow:inset -3px 0 0 var(--heavy)}

.set-chev{flex:0 0 auto;color:var(--mute);opacity:.7;transform:rotate(180deg)}
.set-chev .nv-icon,.set-chev svg{width:16px;height:16px}

.set-page[data-page]:not([data-page="root"]) .set-group:first-child{margin-top:2px}

.set-copy{margin:0;font-size:13px;line-height:1.65;color:var(--mute)}
.set-copy b{color:var(--ink);font-weight:600}


.set-colophon{
  margin-top:26px;padding-top:16px;
  border-block-start:1px solid var(--edge)
}
.set-colophon .set-copy{font-size:12px;line-height:1.6}
.set-colophon .set-copy + .set-copy{margin-top:4px}

.set-mail{
  color:var(--sodium);text-decoration:none;
  border-block-end:1px solid color-mix(in srgb,var(--sodium) 45%,transparent);
  padding-block:6px;
  direction:ltr;unicode-bidi:isolate;display:inline-block
}
.set-mail:active{color:var(--accent-soft)}

@media (max-height:700px){

  #settings .sheet-head{padding-block:7px 9px}
  #settings .grip{margin-block-end:8px}
  #settings .head-row{padding-block:0 2px;margin-block-end:6px}

  #settings .set-row{padding-block:11px}

  #settings .sheet-body{padding-block-end:calc(env(safe-area-inset-bottom) + 12px)}
}

#updateVeil{
  position:fixed;inset:0;z-index:1300;
  display:flex;justify-content:center;
  align-items:flex-start;
  padding:var(--brand-top,39vh) 24px 32px;
  box-sizing:border-box;
  background:var(--void);
  animation:upd-in .18s ease both
}
#updateVeil[hidden]{display:none}
@keyframes upd-in{from{opacity:0}to{opacity:1}}

.upd-box{width:100%;max-width:340px;text-align:center}

.upd-mark{
  font-family:var(--f-head);font-weight:300;
  font-size:30px;letter-spacing:.30em;
  text-indent:.30em;
  color:var(--ink)
}
.upd-mark span{color:var(--sodium)}

.upd-sub{
  margin-top:10px;margin-bottom:26px;
  font-size:12px;letter-spacing:.01em;text-indent:0;
  color:var(--mute)
}

.upd-bar{
  height:3px;border-radius:2px;overflow:hidden;
  background:color-mix(in srgb,var(--ink) 12%,transparent);
  margin-bottom:22px
}
.upd-bar i{
  display:block;height:100%;width:40%;border-radius:2px;
  background:var(--sodium);
  animation:upd-slide 1.15s ease-in-out infinite
}
@keyframes upd-slide{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(250%)}
}

.upd-log{
  list-style:none;margin:0;padding:0;
  font-size:12.5px;line-height:1.6;color:var(--mute);
  text-align:start;
  min-height:132px
}
.upd-log li{
  display:flex;gap:8px;
  animation:upd-line .22s ease both
}
.upd-log li::before{content:'·';color:var(--sodium);flex:0 0 auto}
.upd-log li:last-child{color:var(--ink)}
.upd-log li:last-child::before{content:'›'}
@keyframes upd-line{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  #updateVeil,.upd-log li{animation:none}
  .upd-bar i{animation:none;width:100%}
}