:root{
  --barra:86px;          
  --d-passaggio:620ms;   
}

.barra{
  --b-fondo:var(--crema);
  background:var(--b-fondo);
  color:inherit;
  border-top:1px solid color-mix(in srgb, currentColor 14%, transparent);
  padding:0 0 env(safe-area-inset-bottom);
}
body.ky    .barra{--b-fondo:var(--sale-ky)}
body.obj   .barra{--b-fondo:var(--crema)}
body.km    .barra{--b-fondo:var(--bianco)}
body.libro .barra{--b-fondo:var(--sale)}

.barra--fondo{position:fixed;left:0;right:0;bottom:0;z-index:6}
.barra .lingua{position:absolute;right:var(--bordo-dx);top:11px}
.barra__dove{padding-right:calc(var(--bordo-dx) + 96px)}
.barra--testa .lingua{top:14px}
body.ky,body.obj,body.km{padding-bottom:calc(var(--barra) + env(safe-area-inset-bottom))}

.barra__dove{
  margin:0;padding:11px var(--bordo-dx) 0 var(--bordo-sx);
  font-size:var(--t-micro,12px);font-weight:400;line-height:19px;min-height:19px;
  letter-spacing:.02em;opacity:var(--o-riposo);
}
.barra__dove em{font-family:"Instrument Serif",serif;font-style:italic;font-size:1.12em}

.barra__voci{
  display:flex;align-items:center;gap:4px;
  padding:0 var(--bordo-dx) 0 var(--bordo-sx);
  font-size:13px;letter-spacing:.02em;
}
.barra__casa,.barra__voce{
  position:relative;display:inline-flex;align-items:center;
  min-height:var(--tocco-min,44px);height:var(--tocco-min,44px);
  padding:0 9px;line-height:1;
}
.barra__casa{padding-left:0;margin-right:auto;font-size:14px}
.barra__casa .wm{font-size:14px}
.barra__voce{
  font-family:"Instrument Serif",serif;font-style:italic;font-size:17px;
  text-transform:lowercase;
  opacity:var(--o-riposo);transition:opacity var(--d-breve) var(--c-posa);
}
.barra__voce[aria-current],.barra__casa[aria-current]{opacity:1}

.tick{display:none;position:absolute;left:9px;right:9px;bottom:9px;height:2px;background:var(--rosso-tocco,currentColor)}
.barra__casa .tick{left:0}
[aria-current] .tick{display:block}
@media (prefers-reduced-motion:no-preference){
  [aria-current] .tick{view-transition-name:segno}
}
.barra__voce:not([aria-current]):focus-visible{opacity:1}
@media (hover:hover) and (pointer:fine){
  .barra__voce:not([aria-current]):hover{opacity:1}
}

.barra--testa{position:relative;border-top:0;
  border-bottom:1px solid color-mix(in srgb, currentColor 14%, transparent)}
.barra--testa .barra__dove{padding-top:14px}
.barra--testa .barra__voci{padding-bottom:6px}

@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
::view-transition-group(*){animation-duration:var(--d-posa);animation-timing-function:var(--c-posa)}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--d-breve)}
::view-transition-group(segno){animation-duration:var(--d-posa)}
::view-transition-group(porta){animation-duration:var(--d-passaggio)}
::view-transition-old(porta){animation:vt-tiene var(--d-passaggio) var(--c-posa) both}
@keyframes vt-tiene{0%,52%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}

body.ky .scheda dt,body.obj .scheda dt,body.km .scheda dt,
body.ky .scheda--riga dt{font-size:var(--t-micro);letter-spacing:.16em;opacity:var(--o-riposo)}
body.ky .firma,body.obj .firma,body.km .firma,
body.ky .dove,body.obj .dove,body.km .dove{font-size:var(--t-micro);opacity:var(--o-riposo)}
body.ky .firma,body.obj .firma,body.km .firma{opacity:1}
body.ky .barca__num{opacity:var(--o-riposo)}

body.ky a.gesto,body.obj a.gesto,body.km a.gesto{position:relative}
body.ky a.gesto::before,body.obj a.gesto::before,body.km a.gesto::before{
  content:"";position:absolute;left:-10px;right:-10px;
  top:calc((var(--tocco-min) - 100%) / -2);bottom:calc((var(--tocco-min) - 100%) / -2);
  min-height:var(--tocco-min);
}

@media (min-width:769px){
  :root{--barra:0px}
  .barra--fondo{position:relative}
  .barra__dove{font-size:13px;line-height:21px;min-height:21px;padding-top:16px}
  .barra--fondo .lingua{top:17px}
  .barra__voci{padding-bottom:16px}
  .barra__voce{font-size:19px}
}