/* Esteban — the top row: .tbleft and .tbright, and the round .gear buttons in them */

.topbar{
  --tbtn:52px;--tbico:29px;--tbgap:16px;
  display:flex;align-items:center;flex-wrap:wrap-reverse;gap:var(--tbgap);
  margin:0 4px 24px;
}
.topbar .tbleft{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--tbgap);
  flex:1 1 auto;min-width:0;
}
.topbar .tbright{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--tbgap);
  flex:none;margin-left:auto;justify-content:flex-end;
}
.topbar .hnav{display:flex;align-items:center;flex-wrap:wrap;gap:var(--tbgap);flex:none}
.topbar .hnav.rosetta-apps{justify-content:flex-end}
.topbar .tbright,.topbar .hnav.rosetta-apps{max-width:100%}
.topbar .tbgap{flex:0 0 calc(var(--tbtn) / 2)}

/* title and subtitle */
.topbar h1{
  font-size:27px;letter-spacing:-.4px;line-height:1.15;margin:0;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.topbar .who{flex:1 1 auto;min-width:0}
.topbar .tag{
  color:var(--accent,var(--cyan));font-size:14px;font-weight:600;
  letter-spacing:normal;text-transform:none;margin:2px 0 0;
  padding:0;border:0;border-radius:0;background:none;white-space:normal;
}
.topbar .pen{
  background:none;border:0;color:var(--border);font:inherit;font-size:15px;
  cursor:pointer;vertical-align:middle;padding:2px 6px;margin-left:6px;
}
.topbar .pen:hover{color:var(--accent,var(--cyan))}
.topbar .pen[hidden]{display:none}

/* .big — large avatar beside the title */
.topbar.big{--tbmark:104px;gap:20px}
.topbar.big .tbleft{gap:20px}
.topbar.big h1{font-size:31px}
.topbar.big .tag{font-size:15px}
.topbar .mark{
  flex:0 0 var(--tbmark,104px);width:var(--tbmark,104px);height:var(--tbmark,104px);
  display:block;overflow:hidden;border:0;padding:0;background:none;border-radius:50%;
  box-shadow:0 0 0 3px var(--navy), 0 0 0 5px color-mix(in srgb, var(--accent,var(--cyan)) 35%, transparent);
  transition:box-shadow .15s ease, transform .15s ease;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.topbar .mark img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}
.topbar .mark:hover{transform:translateY(-2px);
  box-shadow:0 0 0 3px var(--navy), 0 0 0 5px var(--accent,var(--cyan))}
.topbar .mark:active{filter:brightness(.86)}

/* the round buttons */
.topbar .gear{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:var(--tbtn);height:var(--tbtn);overflow:hidden;border-radius:50% !important;
  background:var(--card);border:0;padding:0;color:var(--muted);
  text-decoration:none;font:inherit;cursor:pointer;
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px color-mix(in srgb, var(--accent,var(--cyan)) 35%, transparent);
  transition:color .15s, box-shadow .15s ease, transform .15s ease;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.topbar .gear:hover{color:var(--accent,var(--cyan));transform:translateY(-2px);
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px var(--accent,var(--cyan))}
.topbar .gear:active{filter:brightness(.86)}
.topbar .gear[hidden]{display:none}
.topbar .gear svg{width:var(--tbico);height:var(--tbico);fill:currentColor;
  transition:transform .35s ease}
.topbar .gear.rosetta-app.tinted{color:var(--tint)}

/* per-destination icon sizing */
.topbar .gear:hover svg{transform:none}
.topbar .gear.cog:hover svg{transform:rotate(60deg)}
.topbar .gear.ball svg{width:100%;height:100%;transition:none}
.topbar .gear.tcgp svg{width:calc(var(--tbico) + 5px);height:calc(var(--tbico) + 5px);transition:none}
.topbar .gear.photos svg{width:calc(var(--tbico) + 4px);height:calc(var(--tbico) + 4px);transition:none}
.topbar .gear.avatar{background:none}
.topbar .gear.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.topbar .gear.pomo{font-size:calc(var(--tbico) - 5px);line-height:1}
.topbar .gear.show svg,.topbar .gear.stack svg,.topbar .gear.rosetta svg,.topbar .gear.trlang svg,.topbar .gear.sandbox svg{
  width:calc(var(--tbico) - 3px);height:calc(var(--tbico) - 3px);
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.topbar .gear.mosaic svg{
  width:calc(var(--tbico) - 3px);height:calc(var(--tbico) - 3px);fill:currentColor;
}

/* tints */
.topbar .gear.apps{background:linear-gradient(140deg,color-mix(in srgb, var(--mint) 32%, transparent),color-mix(in srgb, var(--mint) 12%, transparent));
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px color-mix(in srgb, var(--mint) 70%, transparent)}
.topbar .gear.apps:hover{background:linear-gradient(140deg,color-mix(in srgb, var(--mint) 41%, transparent),color-mix(in srgb, var(--mint) 17%, transparent));
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px var(--mint)}
.topbar .gear.photos{background:linear-gradient(140deg,color-mix(in srgb, var(--cyan) 46%, var(--card)),color-mix(in srgb, var(--cyan) 22%, var(--card)));
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px color-mix(in srgb, var(--cyan) 55%, transparent)}
.topbar .gear.photos:hover{background:linear-gradient(140deg,color-mix(in srgb, var(--cyan) 58%, var(--card)),color-mix(in srgb, var(--cyan) 30%, var(--card)));
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px var(--cyan)}
.topbar .gear.pokedex{background:linear-gradient(140deg,color-mix(in srgb, var(--coral) 46%, var(--card)),color-mix(in srgb, var(--coral) 22%, var(--card)));
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px color-mix(in srgb, var(--coral) 55%, transparent)}
.topbar .gear.pokedex:hover{background:linear-gradient(140deg,color-mix(in srgb, var(--coral) 58%, var(--card)),color-mix(in srgb, var(--coral) 30%, var(--card)));
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px var(--coral)}
.topbar .gear.tcg{background:linear-gradient(140deg,color-mix(in srgb, var(--gold) 46%, var(--card)),color-mix(in srgb, var(--gold) 22%, var(--card)));
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px color-mix(in srgb, var(--gold) 55%, transparent)}
.topbar .gear.tcg:hover{background:linear-gradient(140deg,color-mix(in srgb, var(--gold) 58%, var(--card)),color-mix(in srgb, var(--gold) 30%, var(--card)));
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px var(--gold)}
.topbar .gear.pdesk{background:linear-gradient(140deg,color-mix(in srgb, var(--sunset) 46%, var(--card)),color-mix(in srgb, var(--sunset) 22%, var(--card)));
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px color-mix(in srgb, var(--sunset) 55%, transparent)}
.topbar .gear.pdesk:hover{background:linear-gradient(140deg,color-mix(in srgb, var(--sunset) 58%, var(--card)),color-mix(in srgb, var(--sunset) 30%, var(--card)));
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px var(--sunset)}
.topbar .gear.sandbox{color:var(--mint);background:linear-gradient(140deg,color-mix(in srgb, var(--mint) 46%, var(--card)),color-mix(in srgb, var(--mint) 22%, var(--card)));
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px color-mix(in srgb, var(--mint) 55%, transparent)}
.topbar .gear.sandbox:hover{color:var(--gray);background:linear-gradient(140deg,color-mix(in srgb, var(--mint) 58%, var(--card)),color-mix(in srgb, var(--mint) 30%, var(--card)));
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px var(--mint)}
/* rosetta — light mode */
html[data-color-mode="light"] .topbar .gear.rosetta{color:#312C29;
  background:linear-gradient(140deg,color-mix(in srgb, #312C29 46%, var(--card)),color-mix(in srgb, #312C29 22%, var(--card)));
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px color-mix(in srgb, #312C29 55%, transparent)}
html[data-color-mode="light"] .topbar .gear.rosetta:hover{background:linear-gradient(140deg,color-mix(in srgb, #312C29 58%, var(--card)),color-mix(in srgb, #312C29 30%, var(--card)));
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px #312C29}
/* rosetta — dark mode */
html[data-color-mode="dark"] .topbar .gear.rosetta{color:#E3D5C6;
  background:linear-gradient(140deg,color-mix(in srgb, #E3D5C6 46%, var(--card)),color-mix(in srgb, #E3D5C6 22%, var(--card)));
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px color-mix(in srgb, #E3D5C6 55%, transparent)}
html[data-color-mode="dark"] .topbar .gear.rosetta:hover{background:linear-gradient(140deg,color-mix(in srgb, #E3D5C6 58%, var(--card)),color-mix(in srgb, #E3D5C6 30%, var(--card)));
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px #E3D5C6}
.topbar .gear.tinted{background:linear-gradient(140deg,color-mix(in srgb, var(--tint) 46%, var(--card)),color-mix(in srgb, var(--tint) 22%, var(--card)));
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px color-mix(in srgb, var(--tint) 55%, transparent)}
.topbar .gear.tinted:hover{background:linear-gradient(140deg,color-mix(in srgb, var(--tint) 58%, var(--card)),color-mix(in srgb, var(--tint) 30%, var(--card)));
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px var(--tint)}

/* on display */
/* the star that puts favorites in the draw, and the green play toggle */
.topbar .gear.favs svg{fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linejoin:round;stroke-linecap:round}
.topbar .gear.favs:hover{color:var(--gold)}
.topbar .gear.favs[aria-pressed="true"]{color:var(--gold);
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px var(--gold)}
.topbar .gear.favs[aria-pressed="true"] svg{fill:currentColor}
.topbar .gear.playnow svg{fill:currentColor;stroke:none}
.topbar .gear.playnow:hover{color:var(--mint)}
.topbar .gear.playnow[aria-pressed="true"]{color:var(--mint);
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px var(--mint)}

.topbar .gear.show{box-shadow:0 0 0 2px var(--navy), 0 0 0 4px color-mix(in srgb, var(--sunset) 35%, transparent)}
.topbar .gear.show:hover{color:var(--sunset);box-shadow:0 0 0 2px var(--navy), 0 0 0 4px var(--sunset)}
.topbar .gear.show[aria-pressed="true"]{color:var(--sunset);
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px var(--sunset)}
.topbar .gear.show[aria-pressed="true"] svg rect{fill:currentColor}

/* workspace pill slot */
.topbar [data-ws-slot]:empty{display:none}

/* the "…" toggle that reveals Rosetta apps hidden from the header, as a second row */
.topbar .gear.more svg{fill:currentColor}
.topbar .gear.more[aria-expanded="true"]{color:var(--accent,var(--cyan));
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px var(--accent,var(--cyan))}
.rosetta-more-break{flex:0 0 100%;height:0}
.rosetta-more-break[hidden]{display:none}
.topbar .gear.rosetta-app[aria-pressed="false"]{filter:grayscale(1) brightness(.55);opacity:.65}

@media(max-width:720px){
  .topbar{--tbtn:46px;--tbico:26px;--tbgap:12px;margin-bottom:20px}
  .topbar.big{--tbmark:78px;gap:15px}
  .topbar.big .tbleft{gap:15px}
  .topbar.big h1{font-size:26px}
  .topbar.big .tag{font-size:13px}
  .topbar h1{font-size:23px;white-space:normal;overflow:visible}
  .topbar .tbright{flex:1 1 100%;margin-left:0}
  .topbar .tbleft{flex:1 1 100%}
  .topbar .tbgap{flex-basis:100%;height:0}
}
@media(max-width:420px){
  .topbar{--tbtn:42px;--tbico:23px;--tbgap:9px}
  .topbar.big{--tbmark:64px;gap:12px}
  .topbar.big .tbleft{gap:12px}
  .topbar.big h1{font-size:23px}
  .topbar h1{font-size:21px}
}

@media(prefers-reduced-motion:reduce){
  .topbar .gear,.topbar .gear svg,.topbar .mark{transition:none}
  .topbar .gear:hover,.topbar .mark:hover{transform:none}
  .topbar .gear.cog:hover svg{transform:none}
}